目录
Vue是一套用于构建用户界面的渐进式JavaScript框架。
Vue的特点：
1.采用组件化模式，提高代码复用率、且让代码更好维护。
2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。
3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
前导知识：ES6语法规范、ES6模块化、包管理器、原型和原型链、数组的常用方法、axios、promise...
初识Vue：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象。
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法。
3.root容器里的代码被称为“Vue模板”。
4.Vue实例和容器是一一对应的。
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用。
6.{ {xx}}中的xx要写js表达式，并且xx可以自动读取到data中的所有属性。
7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新Vue。
模板语法有两大类：
1.插值语法：用于解析标签体内容，写法：{ {xx}}，xx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：用于解析标签（包括：标签属性、标签体内容、绑定事件...），例：v-bind:href=”xx”或简写为:href=”xx”，xx写js表达式，且可以直接读取到data中的所有属性（Vue中有很多指令，且形式都是v-xx，此处只是拿v-bind举例）。
<body>
<div id="root">
<!--插值语法-->
<h1>hello {
{name.toUpperCase()}},name:{
{a.name}}</h1>
<!-- hello WORLD,name:null -->
<!-- 双大括号内放表达式，js表达式的结果是一个值，js语句只控制代码走向没有值 -->
<!-- 指令语法 -->
<a v-bind:href="url">点我去百度</a>
<!-- "v-bind:" 可以简写为 ":" -->
</div>
<script>
Vue.config.productionTip=false; //阻止 vue 在启动时生成生产提示。
// 创建Vue实例
const x=new Vue({
el:'#root', //指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data:{ //data用于存储数据，数据供el所指定的容器去使用
name:'world',
a:{
name:'null'
},
url:'http://www.baidu.com'
}
});
</script>
</body>Vue中有两种数据绑定的方式：
1.单向绑定（v-bind）：数据只能从data流向页面。
2.双向绑定（v-model）：数据可以从data流向页面，也可以从页面流向data。双向绑定一般都应用在表单类（输入类）元素上。v-model:value可以简写为v-model，因为v-model默认收集的就是value值。
<body>
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name">
双向数据绑定：<input type="text" v-model:value="name">
</div>
<script>
Vue.config.productionTip=false; //阻止 vue 在启动时生成生产提示。
// 创建Vue实例
const x=new Vue({
el:'#root',
data:{
name:'world'
}
});
</script>
</body>el和data的两种写法：
el：（1）new vue的时候配置el属性。（2）先创建Vue实例，随后再通过实例.$mount(‘#root’)指定el的值。
data：（1）对象式。（2）函数式。目前两种写法都可以用，但在写组件时必须使用函数式，否则会报错。
由Vue管理的函数，一定不要写箭头函数，否则this就不再是Vue实例，而是window对象了。
<body>
<div id="root">
<h1>hello,{
{name}}</h1>
</div>
<script>
Vue.config.productionTip=false; //阻止 vue 在启动时生成生产提示。
// 创建Vue实例
const x=new Vue({
// el:'#root',
// data:{
// name:'tml'
// }
data:function(){//data的另一种写法，写组件的时候必须用这种写法
console.log(this);//此处this是Vue实例对象
return{
name:'tml'
}
}
});
x.$mount('#root');//el的另一种写法
</script>
</body>MVVM模型：
虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此我们经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。data中所有的属性，最后都出现在了vm身上。vm身上所有的属性，在Vue模板中都可以直接使用。
M：模型（model），对应data中的数据；V：视图（View），模板；VM：视图模型（ViewModel），Vue实例对象。
数据代理：
Object.defineProperty：
let number=18;
let person={
name:'tml',
sex:'famale'
}
Object.defineProperty(person,'age',{
// value:21,
// enumerable:true, //控制属性是否可以枚举，默认值为false
// writable:true, //控制属性是否可以被修改，默认值为false
// configurable:true, //控制属性是否可以被删除，默认值为false
// 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
get:function(){
console.log('读取age属性');
return '21';
},
// 当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
set(value){
console.log('修改age属性的值为',value);
}
})
console.log(person);
//{name: 'tml', sex: 'famale'}
// name: "tml"
// sex: "famale"
// age: （21）
// get age: ƒ ()
// set age: ƒ set(value)
// [[Prototype]]: Object 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）。
let obj={x:100};
let obj2={y:200};
Object.defineProperty(obj2,'x',{
get(){
return obj.x;
},
set(value){
obj.x=value;
}
})
// obj2 （输入）
// {y: 200} （输出）
// y: 200
// x: （100）
// get x: ƒ get()
// set x: ƒ set(value)
// [[Prototype]]: ObjectVue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）。
好处：更加方便的操作data中的数据。
基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上；为每一个添加到vm上的属性都指定一个getter/setter；在getter/setter内部去操作（读/写）data中对应的属性。
事件处理：
事件的基本使用：
（1）使用v-on:xx或@xx绑定事件，其中xx是事件名。
（2）事件的回调需要配置在methods对象中，最终会在vm上。
（3）methods中配置的函数不要用箭头函数，否则this会是window。
（4）methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象。
（5）@click=”demo”和@click=”demo($event)”效果一致，但后者可以传参。
<body>
<div id="root">
<h1>欢迎来到{
{name}}</h1>
<button v-on:click="showInfo('ok',$event)">点我提示信息</button>
<!-- 简写：<button @click="showInfo">点我提示信息</button> -->
<!-- 不传参可以省略括号 -->
</div>
<script type="text/javascript">
Vue.config.productionTip=false; //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'墓土'
},
methods:{
showInfo(a,b){
alert('大漠之尽，光之所隐');
console.log(this); //Vue实例vm
console.log(a,b); //ok PointerEvent
}
}
})
</script>
</body>事件修饰符：
（1）prevent：阻止默认事件（常用）。
（2）stop：阻止事件冒泡（常用）。
（3）once：事件只触发一次（常用）。
（4）capture：使用事件的捕获模式。
（5）self：只有event.target是当前操作的元素时才触发事件。
（6）passive：事件的默认行为立即执行，无需等待事件回调执行完毕。
<body>
<div id="root" class="demo1">
<h1>欢迎来到{
{name}}</h1>
<!-- 阻止默认事件，点击后不跳转 -->
<a href="http://www.baidu.com" @click.prevent='showInfo'>点击跳转</a>
<!-- 阻止冒泡，只触发里层事件，仅执行一次。事件修饰符可以连着写，例：@click.stop.prevent=”” -->
<div class="demo1" @click='showInfo'><button @click.stop='showInfo'>点我提示</button></div>
<!-- 事件只触发一次 -->
<div class="demo1"><button @click.once='
最低0.47元/天 解锁文章
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
