VUE框架（一）

一、VUE环境搭建

1.1、下载开发版本的Vue

开发版本：https://cn.vuejs.org/js/vue.js

生产版本：https://cn.vuejs.org/js/vue.min.js

1、下载完毕后引入


<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <script type="text/javascript" src="../js/vue.js">script>
head>

1.2、安装开发者工具

谷歌应用商店直接下载：Vue.js devtools

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

安装完毕后查看：

1.3、关闭vue在启动时生成的生产环境提示


<script type="text/javascript">
Vue.config.productionTip = false // 阻止vue在启动时生成的生产环境提示
script>

在浏览器上检查

二、写一个 hello world


<body>
 
<div id="root">
    <h1>hello: {{name}},{{age}}h1>
    
div>
 
<script type="text/javascript">
// 阻止vue在启动时生成的生产环境提示
Vue.config.productionTip = false
 
// 创建Vue实例
const x = new Vue({
    el: "#root",  // 绑定id="root"的容器，值通常为css选择器字符串 (CSS里面的ID选择器)
    data:{  // data里面存储的数据，给'el'指定的容器使用
        name: "wdl",
        age:18
    }
})
script>
 
body>
 
# 执行结果：hello: wdl,18

2.1、总结下这个简单的代码
    1、想让Vue工作，就必须创建一个vue实例，并且传入一个配置对象(el和data)
    2、root容器的代码依然符合html规范，只不过混入了一些特殊的Vue语法
    3、root容器里的代码被称为(Vue模板)

三、延伸一下

3.1、在div容器内{{}}里面除了写vue的data里面的，还可以写js表达式


<body>
 
<div id="root">
  
  <h1>1，{{name}},{{addr.toUpperCase()}},{{1 + 1}}h1>
  
div>
 
<script type="text/javascript">
Vue.config.productionTip = false // 阻止vue在启动时生成的生产环境提示
 
// 创建Vue实例
new Vue({
    el: '#root',   // el 指定当前实例为哪个容器服务，值通常为CSS里面的选择器
    data: {        // 用于存储数据，给el指定的容器'#root'使用。
        name: 'sudada',
        addr: 'shanghai',
    },
})
 
script>
 
body>
 
# 执行结果：1，sudada,SHANGHAI,2

3.2、总结下

1、Vue实例和容器是一一对应的。
2、真是开发中只有一个Vue实例，并且会配合着组件一起使用。
3、一旦data中的数据发生改变，那么模板中用到改数据的地方也会自动更新。
4、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性

四、函数调用表达式


<div id="root">
  addr.toUpperCase() 字符串大写
  addr.toLowerCase() 字符串小写
div>

相关阅读:
mysql join语句优化实战
第二十二章控制进程（三）
Java项目_在线点餐系统(jsp+sevlet+mysql)(含论文)
Java面试题：并发编程高频面试题，请你说一下你对Happens-Before的理解
TSINGSEE青犀视频AI分析/边缘计算/AI算法·厨师帽检测功能——多场景高效运用
一文带你深入理解【Java基础】· 注解
JavaScript系列：JS实现复制粘贴文字以及图片
jmeter界面压测过程卡死解决思路
Flink报错could not be loaded due to a linkage failure
【云计算 | OpenStack】从零开始使用libvirt创建一个kvm虚机

原文地址：https://blog.csdn.net/sinat_29214327/article/details/126089736