一、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>Title</title>
<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>
<!-- {{}} 模板选择器，读取data里面的数据 -->
</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,182.1、总结下这个简单的代码
????1、想让Vue工作，就必须创建一个vue实例，并且传入一个配置对象(el和data)
????2、root容器的代码依然符合html规范，只不过混入了一些特殊的Vue语法
????3、root容器里的代码被称为(Vue模板)
? ? ?
三、延伸一下
3.1、在div容器内{{}}里面除了写vue的data里面的，还可以写js表达式
<body>
<!-- 容器 -->
<div id="root">
<!-- 这里面写js表达式(a,a+b,demo(1)这种) 和 js代码(if(){},for(){}这种) -->
<h1>1，{{name}},{{addr.toUpperCase()}},{{1 + 1}}</h1>
<!--
addr.toUpperCase() 字符串大写
addr.toLowerCase() 字符串小写
-->
</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,23.2、总结下
? ? 1、Vue实例和容器是一一对应的。
? ? 2、真是开发中只有一个Vue实例，并且会配合着组件一起使用。
? ? 3、一旦data中的数据发生改变，那么模板中用到改数据的地方也会自动更新。
? ? 4、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
四、模板语法
4.1、插值语法和指令语法
<body>
<div id="root">
<h1>插值语法</h1>
<!--
插值语法：一般用于解析标签体内容
-->
<h3>hello,{{name}}</h3>
<h1>指令语法</h1>
<!--
指令语法：一般用于解析标签（格式为：v-xxx）
-->
<h1>奥术{{name}}大师</h1>
<a :href="url">百度</a>
<a :href="school.url">点我去学校{{school.name}}学习</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue ({
el:'#root',
data:{
name:'jack',
url:'http://www.baidu.com',
school:{
name:"sudada",
url:'http://www.sougou.com'
}
}
})
</script>4.2、总结插值语法和指令语法
??1、插值语法：一般用于解析"标签体"内容（<h1>xxx</h1>，这个标签了里面的"xxx"就是标签体）
????写法：{{xxxx}}，xxxx是js表达式，且可以直接读取到data中的所有属性
??2、指令语法：格式为?"v-xxx"?一般用于解析"标签"?(包含标签属性，标签内容，绑定事件等)（<a?:href="school.url"?x="hello">，这里面的":href"和x="hello"就是标签属性?）
????写法：v-bind:href="xxx"?简写为?:href="xxx"，"xxx"会被当做js表达式执行，可以直接读取到data中的所有属性。
五、数据绑定
5.1、单向、双向数据绑定
<body>
<div id="root">
<h1>{{name}}</h1>
单向数据绑定: <input type="text" :value="name"><br>
双向数据绑定: <input type="text" v-model="name"><br>
<!--错误代码示例，如下，因为v-model只能应用在"表单"类元素(输入类元素，如上)-->
<h2 v-model:x="name">hello</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:"#root",
data:{
name:"wdl",
input_value:"xxx"
}
})
</script>5.2、单向、双向数据绑定总结
??单向数据绑定(只针对表单输入类)：v-bind:value="name"，里面的'value'会去读"name"的值，当修改'value'的值时，"name"的值不会改变。只能读不能改
??双向数据绑定(只针对表单输入类)：v-model:value="name"，里面的'value'会去读"name"的值，当修改'value'的值时，"name"的值也会跟着改变。可读可改写。
????v-model:value?可以简写为?v-model?，因为v-model默认收集的就是value值。
??数据绑定简写：
??????单向数据绑定:?<input?type="text"?:value="name"><br>
??????双向数据绑定:?<input?type="text"?v-model="name"><br>
六、el和data的两种写法
<body>
<div id="root">
<h1>hello,{{name}}</h1>
</div>
<script type="text/javascript">
// 一、el 的2种写法（2种方式皆可正常使用）
// el 方法：把vue实例对象绑定(挂载)到容器（定义时就指定绑定哪个容器 ）
new Vue({
el:"#root",
data:{
name:"111",
}
})
// $mount 方法：把vue实例对象，绑定(挂载)到容器（最后在指定绑定哪个容器）
const v = new Vue({
data:{
name:"222",
}
})
console.log(v)
v.$mount("#root")
// 二、data 的2种写法
new Vue({
el: "#root",
// data的第一种写法：对象式
data: {
name: "sudada",
},
// data的第二种写法：函数式（不能写成"=>"函数。data函数必须要返回一个数据，这个返回的数据，就是容器内用到的数据。比如容器内用的是name，那么这里就要return一个name）
data(){ // 普通函数，原生写法：data:function
console.log(this) // 此处的this是vue实例对象（这里的this就等于"const v = new Vue"的v）
return{
name: "szq"
}
}
})
</script>七、MVVM模型
7.1、MVVM模型图解
MVVM模型：
??1、M：模型(Model)：data中的数据
??2、V:?视图(View)：页面模板（DOM）
??3、VM：视图模型(ViewModel)：Vue实例，简称vm
观察发现：
??1、data对象中的所有属性(值)，最后都出现在了vm身上。(可以通过vm.xxx拿到data对象里面xxx的值)
??2、vm身上的所有属性以及Vue原型上所有属性，在Vue模板中都可以直接使用。（vm?这个变量名就表示了Vue实例对象）
?7.2、用法说明
<body>
<!-- View 模型 -->
<div id="root">
<h1>学校：{{name}}</h1>
<h1>地址：{{addr}}</h1>
<h1>1：{{$options}}</h1>
<!-- $options：vm身上的属性，这里直接可以调用(仅做测试，目的是证明"模板"里面可以直接调用vm的所有属性) -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
// ViewModel模型，简称vm（vm 这个变量名就表示了Vue实例对象）
const vm = new Vue({
el:"#root",
// Model 模型
data:{
name:"sudada",
addr:"shanghai",
}
})
console.log(vm)
console.log(vm.name)
</script>八、Vue中的数据代理
8.1、原理与实现
1、Vue中的数据代理：是通过vm对象中属性的操作（读/写）
2、Vue中数据代理的好处：更加方便的操作data中的数据
3、基本原理：
??通过Object.defineProperty()把data对象中所有属性添加到vm上。
??为每一个添加到vm的属性，都指定一个"getter/setter"。
??在"getter/setter"内部去操作（读/写）data中对应的属性。
4、实践证明:
??console.log(vm.name)：获取的是data里面name属性的值，实际上调用的是Vue的"get?name"方法实现的。
??console.log(vm.name="szq")：修改的是data里面name属性的值，实际上调用的是Vue的"set?name"方法实现的。
5、vm如何获取data对应的值，使用vm._data，返回的值是是一个对象。（vm._data?==?options.data?==?data）
九、事件处理
9.1、
X、函数调用表达式
<div id="root">
addr.toUpperCase() 字符串大写
addr.toLowerCase() 字符串小写
</div>