Collection
Collection
了解更多详情请访问 https://cn.vuejs.org/v2/guide/index.html
一、Vue 安装
官方手册给出了多种安装方式，这里列出两种
CDN
<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>
NPM
npm install vue
二、初识Vue
学习阶段，推荐使用第一种，不过，我们直接使用下载版本就好，防止断网；
1.想让
Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；2.
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；3.
root容器里的代码被称为【Vue模板】；4.
Vue实例和容器是一一对应的；5.真实开发中只有一个
Vue实例，并且会配合着组件一起使用；6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
<div id="app">{{message}}</div><script src="../js/vue.js"></script><script>//阻止 vue 在启动时生成生产提示。Vue.config.productionTip = false;const app = new Vue({el : '#app',data : {message : 'Hello, Vue!'}});</script>
三、模板语法
Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…..）。
举例：v-bind:href="xxx"或 简写为 :href="xxx"，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处只是拿v-bind举个例子。
<div id="root"><h1>插值语法</h1><h3>你好 {{name}}</h3><hr/><h1>指令语法</h1><a v-bind:href="school.url" x="hello">点我去{{school.name}}学习1</a><a :href="school.url">点我去{{school.name}}学习2</a></div><script>Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'jack',school:{name:'百度',url:'http://www.baidu.com',}}})</script>
四、数据绑定
Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值。
<div id="root"><!-- 普通写法 --><!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>双向数据绑定：<input type="text" v-model:value="name"><br/> --><!-- 简写 -->单项数据绑定：<input type="text" :value="name"><br/>双向数据绑定：<input type="text" v-model="name"><br/><!-- 如下代码是错误的，因为v-model只能应用再表单类元素（输入类元素）上 --><!-- <h2 v-model:x="name">你好啊</h2> --></div><script>Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'张三'}})</script>
五、el和datad的两种写法
data与el的2种写法：
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
<div id="root"><h1>你好，{{name}}</h1></div><script>Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。//el的两种写法// const vm = new Vue({// el:'#root',//第一种写法// data:{// name:'zhangsan'// }// })// console.log(vm)// vm.$mount("#root")//第二种写法new Vue({el:'#root',//data的第一种写法，对象式// data:{// name:'zhangsan'// }//data的第二种写法，函数式data(){console.log('@@@',this)//此处的this是Vue实例对象return{name:'zhangsan'}}})</script>
六、事件处理器
1、事件的基本使用
1.使用
v-on:xxx或@xxx绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或 组件实例对象；
5.@click="demo"和@click="demo($event)"效果一致，但后者可以传参；
<div id="root"><h2>欢迎来到{{name}}学习</h2><!-- <button v-on:click="showInfo">点我提示信息</button> --><button @click="showInfo1">点我提示信息1(不传参)</button><button @click="showInfo2($event,66)">点我提示信息2(传参)</button></div><script>Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{name:'中国',},methods:{showInfo1(event){console.log(event.target.innerText)console.log(this)//此处的this是vmalert('你好！')},showInfo2(event,number){console.log(event , number)console.log(event.target.innerText)console.log(this)alert('你好')}}})</script>
2、事件修饰符
1.
prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
<div id="root"><h2>欢迎来到{{name}}学习</h2><!-- 阻止默认事件（常用） --><a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a><!-- 阻止事件冒泡（常用） --><div class="demo1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</button><!-- 修饰符可以连续写 --><!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo"></a> --></div><!-- 事件只触发一次（常用） --><button @click.once="showInfo">点我提示信息</button><!-- 使用事件的捕获模式 --><div class="box1" @click.capture="showMag(1)">div<div class="box2" @click="showMag(2)">div2</div></div><!-- 只有event.target是当前操作的元素时才触发事件； --><div class=""></div></div><script>Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{name:'中国'},methods:{showInfo(e){alert('同学你好！')console.log(e.target)},showMag(msg){console.log(msg)}}})</script>
2、键盘事件
1.
Vue中常用的按键别名：
回车 =>enter
删除 =>delete(捕获“删除”和“退格”键)
退出 =>esc
空格 =>space
换行 =>tab(特殊，必须配合keydown去使用)
上 =>up
下 =>down
左 =>left
右 =>right2.
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）3.系统修饰键（用法特殊）：
ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。4.也可以使用
keyCode去指定具体的按键（不推荐）5.
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
<div id="root"><h2>欢迎来到{{name}}学习</h2><!-- <input type="text" placeholder="按下回车提示输入" @keyup="showInfo"> --><!-- <input type="text" placeholder="按下回车提示输入" @keydown="showInfo"> --><input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo"></div><script>Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。Vue.config.keyCodes.huiche = 13 //定义了一个别名按键new Vue({el:'#root',data:{name:'中国'},methods: {showInfo(e){// console.log(e.key,e.keyCode)console.log(e.target.value)}},})</script>
七、计算属性
计算属性关键词: computed
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
<div id="root">姓：<input type="text" v-model="firstName"><br/><br/>名：<input type="text" v-model="lastName"><br/><br/>全名：<span>{{fullName}}</span></div><script>Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:"#root",data:{firstName:"张",lastName:"三",},computed:{//完整写法（原理）// fullName:{// get(){// console.log('get被调用了')// return this.firstName + '-' + this.lastName// },// set(value){// console.log('set' , value)// const arr = value.split('-')// this.firstName = arr[0]// this.lastName = arr[1]// }// }//简写fullName(){console.log('get被调用了')return this.firstName + '-' + this.lastName }}})</script>
八、监视属性
监视属性关键字：
watch
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
<div id="root"><h2>今天天气很{{info}}</h2><button @click="changWeaher">切换天气</button><hr/><h3>a的值是:{{numbers.a}}</h3><button @click="numbers.a++">点我让a+1</button><h3>b的值是：{{numbers.b}}</h3><button @click="numbers.b++">点我让b+1</button><h3>e的值是：{{numbers.c.d.e}}</h3><button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button></div><script>Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{isHot:true,numbers:{a:1,b:1,c:{d:{e:100}}}},computed:{info(){return this.isHot ? '炎热' : '凉爽'}},methods: {changWeaher(){this.isHot = !this.isHot}},watch:{isHot:{// immediate:true, //初始化时让handler调用一下// handler什么时候调用？当isHot发生改变时。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}},//简写// isHot(newValue,oldValue){// console.log('isHot被修改了',newValue,oldValue,this)// },//监视多级结构某个属性的变化// 'numbers.a':{// handler(){// console.log('a被修改了')// }// }numbers:{// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深deep:true,handler(){console.log('numbers改变了')}}}})// 第二种写法// vm.$watch('isHot',{// immediate:true,//初始化时让handler调用一下// deep:true,//深度监视// handler(newValue,oldValue){// console.log('isHot被修改了',newValue,oldValue)// }// })//简写// vm.$watch('isHot',(newValue,oldValue)=>{// console.log('isHot被修改了',newValue,oldValue,this)// })</script>
九、computed和watch之间的区别
1.
computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm或 组件实例对象。
<div id="root">姓：<input type="text" v-model="firstName"><br><br>名：<input type="text" v-model="lastName"><br><br>全名：<span>{{fullName}}</span></div><script>Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{firstName:'张',lastName:'三',fullName:'张-三'},watch:{firstName(val){setTimeout(() => {console.log(this)this.fullName = val + "-" + this.lastName}, 1000);},lastName(val){this.fullName = this.firstName + '-' + val}}})</script>
十、绑定样式
- class样式
写法:class="xxx"xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。- style样式
:style="{fontSize: xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。
<div id="root"><!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --><div class="basic" :class="mood" @click="changeMood">{{name}}</div><br><br><!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 --><div class="basic" :class="classArr">{{name}}</div><br><br><!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 --><div class="basic" :class="classObj">{{name}}</div><br><br><!-- 绑定style样式--数组写法 --><div class="basic" :style="styleArr">{{name}}</div><br><br><!-- 绑定style样式--对象写法 --><div class="basic" :style="styleObj">{{name}}</div><br><br></div><script>Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{name:'中国',mood:'normal',classArr:['atguigu1','atguigu2','atguigu3'],classObj:{atguigu1:true,atguigu2:false,},styleArr:[{fontSize:'40px',color:'blue',},{backgroundColor:'gray'}],styleObj:{fontSize:'40px',color:'red',},styleObj2:{backgroundColor:'orange'}},methods: {changeMood(){const arr = ['happy' , 'sad' , 'normal']const index = Math.floor(Math.random()*3)this.mood = arr[index]}},})</script>
十一、条件渲染
1.
v-if
写法：
(1).v-if=”表达式”
(2).v-else-if=”表达式”
(3).v-else=”表达式”
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。2.
v-show
写法：v-show=”表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉3.备注：使用
v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
<div id="root"><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button><!-- 使用v-show做条件渲染 --><h2 v-show="false">欢迎来到{{address}}</h2><h2 v-show="1 === 1">欢迎来到{{address}}</h2><!-- 使用v-if做条件渲染 --><h2 v-if="false">欢迎来到{{address}}</h2><h2 v-if="1 === 1">欢迎来到{{address}}</h2><!-- v-else和v-else-if --><div v-if="n === 1">Angular</div><div v-else-if="n === 2">React</div><div v-else-if="n === 3">Vue</div><div v-else>哈哈</div><!-- v-if与template的配合使用 --><template v-if="n === 1"><h2>你好</h2><h2>中国</h2><h2>北京</h2></template></div><script>Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{address:'中国',n:0},})</script>
十二、列表渲染
v-for指令:
1.用于展示列表数据
2.语法：v-for="(item, index) in xxx" :key="yyy"
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
<div id="root"><!-- 便利数组 --><h2>人员列表（便利数组）</h2><ul><li v-for="(p,index) of persons" :key="index">{{p.name}}-{{p.age}}</li></ul><!-- 遍历对象 --><h2>汽车信息（遍历对象）</h2><ul><li v-for="(value,k) of car" :key="k">{{k}}-{{value}}</li></ul><!-- 遍历字符串 --><h2>测试遍历字符串(用的少)</h2><ul><li v-for="(char,index) of str" :key="index">{{char}}-{{index}}</li></ul><!-- 遍历指定次数 --><h2>测试遍历指定次数（用的少）</h2><ul><li v-for="(number,index) of 5" :key="index">{{index}}-{{number}}</li></ul></div><script>Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{persons:[{id:'001', name:'张三', age:18},{id:'002', name:'李四', age:19},{id:'003', name:'王五', age:20}],car:{name:'奥迪',price:'70万',color:'黑色'},str:'hello'},})</script>
十三、表单
若：
<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
<div id="root"><form action="" @submit.prevent="demo">账号：<input type="text" v-model.trim="userInfo.account"><br>密码：<input type="password" v-model="userInfo.password"><br>年龄：<input type="number" v-model.number="userInfo.age"><br>性别：男：<input type="radio" name="sex" value="1" v-model="userInfo.sex">女：<input type="radio" name="sex" value="0" v-model="userInfo.sex"><br><br>爱好：学习：<input type="checkbox" value="1" v-model="userInfo.hobby">打游戏：<input type="checkbox" value="2" v-model="userInfo.hobby">吃饭：<input type="checkbox" value="3" v-model="userInfo.hobby"><br><br>所属地区<select name="" id="" v-model="userInfo.city"><option value="">请选择地区</option><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option><option value="4">深圳</option></select><br><br>其他信息：<textarea name="" id="" cols="30" rows="10" v-model.lazy="userInfo.other"></textarea><br><br><input type="checkbox" v-model="userInfo.agree"><a href="#">阅读并接受</a><button>提交</button></form></div><script>Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{userInfo:{account:'',password:'',age:18,sex:'0',hobby:[],city:'1',other:'',agree:''}},methods: {demo(){console.log(JSON.stringify(this.userInfo))}},})</script>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
