您现在的位置是：主页 > news > 网站建设细节/网络整合营销是什么意思
网站建设细节/网络整合营销是什么意思
admin2025/4/28 1:44:00【news】
简介网站建设细节,网络整合营销是什么意思,芜湖做网站的公司排名,用电脑记事本做网站目录 初识vue vue模板语法 数据绑定 el与data的两种写法 MVVM模型 数据代理 事件处理 计算属性 监视属性 绑定样式 条件渲染 列表渲染 收集表单数据 过滤器 内置指令 自定义指令 生命周期 初识vue 初识vue： 1.想让vue工作࿰…
目录
初识vue
vue模板语法
数据绑定
el与data的两种写法
MVVM模型
数据代理
事件处理
计算属性
监视属性
绑定样式
条件渲染
列表渲染
收集表单数据
过滤器
内置指令
自定义指令
生命周期
初识vue
初识vue：
1.想让vue工作，就必须创建一个vue实例，且要传入一个配置对象
2.root容器里的代码依然符合HTML规范，只不过混入了一些特殊的vue语法
3.root容器里的代码被称为 vue模板
4.vue实例和容器是一一对应的
5.真实开发中只有一个vue实例，并且会配合着组件一起使用
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script></head><body><!-- 初识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="root"><h1>hello {{name}}</h1></div><script>Vue.config.productionTip = false //阻止vue在启动时生成生产提示// 创建Vue实例new Vue({el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串data: { //data中用于存储数据，数据供el所指定的容器去使用name: 'world'}})</script></body>
</html>
vue模板语法
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="url">百度</a></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#root',data: {name: 'vue',url: 'https://www.baidu.com'}})</script>数据绑定
vue中有两种数据绑定的方式：
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" :value="name" /><br />双向数据绑定：<input type="text" v-model:value="name" /> -->单向数据绑定：<input type="text" :value="name" /><br />双向数据绑定：<input type="text" v-model="name" /><!-- 如下代码是错误的。因为v-model只能应用在表单类元素（输入类元素）上 --><!-- <h2 v-model:x="name">你好</h2> --></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#root',data:{name:'world'}})</script>el与data的两种写法
el与data的两种写法
el有两种写法
1.new Vue时配置el属性
2.先创建vue实例，随后再通过vm.$mount('#root')指定el的值
data有两种写法
1.对象式
2.函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错
一个重要的原则：
由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了。
<div id="root"><h1>你好，{{name}}</h1></div><script type="text/javascript">Vue.config.productionTip=false// // el的两种写法// const v=new Vue({// // el:'#root', //第一种写法// data:{// name:'世界'// }// })// setTimeout(()=>{// v.$mount('#root') //第二种写法// },3000)// data的两种写法new Vue({el:'#root',// // data的第一种写法：对象式// data:{// name:'世界'// }data:function(){console.log(this) //此处的this是vue实例对象，不要写成箭头函数，否则this就是window对象return{name:'世界'}}})</script>MVVM模型
MVVM模型
1.M：模型（Model）：data中的数据
2.V：视图（View）：模板代码
3.VM：视图模型（ViewModel）：vue实例
观察发现：
1.data中的所有属性，最后都出现在了vm身上。
2.vm身上所有的属性及vue原型上所有属性，在vue模板中都可以直接使用。
<div id="root"><h1>学校名称：{{name}}</h1><h1>学校地址：{{address}}</h1></div><script type="text/javascript">Vue.config.productionTip=falseconst vm=new Vue({el:'#root',data:{name:"北京大学",address:"北京"}})console.log(vm)</script>数据代理
回顾Object.defineProperty方法
<script type="text/javascript">let number=18let person={name:'张三',sex:'男'}Object.defineProperty(person,'age',{// value:18,// enumerable:true ,//控制属性是否可以枚举，默认值是false// writable:true ,//控制属性是否可以被修改，默认值是false// configurable:true,//控制属性是否可以被删除，默认值是false// 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值get(){console.log('有人读取age属性了')return number},// 当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体指set(value){console.log('有人修改了age属性，且值是：'+value)number=value}})console.log(person)// console.log(Object.keys(person))数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
vue中数据代理的好处：
更加方便的操作data中的数据
基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部操作（读/写）data中对应的属性。
事件处理
事件的基本使用：
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="showInfo1">点我提示信息1（不传参）</button><button @click="showInfo2(66,$event)">点我提示信息2（传参）</button></div><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{name:'召唤师峡谷'},methods:{showInfo1(event){console.log('123')},showInfo2(number,enevt){console.log(number,event)}}})</script>vue中的事件修饰符：
1.prevent：阻止默认事件（常用）
2.stop：阻止事件冒泡（常用）
3.once：事件只触发一次（常用）
4.capture：使用事件的捕获模式
5.self：只有event.target是当前操作的元素时才触发事件
6.passive：事件的默认行为立即执行，无需等待事件的回调执行完毕
<div id="root"><h2>欢迎来到{{name}}</h2><!-- 阻止默认事件（常用） --><a href="https://www.baidu.com" @click.prevent="showInfo">点我提示信息</a><!-- 阻止事件冒泡（常用） --><div class="demo1" @click="showInfo"><button type="button" @click.stop="showInfo()">点我提示信息</button><!-- 修饰符可以连续写 --><a href="https://www.baidu.com" @click.stop.prevent="showInfo()">百度</a></div><!-- 事件只触发一次（常用） --><button type="button" @click.once="showInfo()">点我提示信息</button><!-- 使用事件的捕获模式 --><div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div><!-- 只有event.target是当前操作的元素时才触发事件 --><div class="demo1" @click.self="showInfo"><button type="button" @click="showInfo">点我提示信息</button></div><!-- 事件的默认行为立即执行，无需等待事件的回调执行完毕 --><ul @wheel.passive="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{name:"召唤师峡谷"},methods:{showInfo(e){alert("123")// console.log(e.target)},showMsg(msg){console.log(msg)},demo(){for(var i=0;i<10000;i++){console.log("1111111")}}}})</script>1.vue中常用的按键别名：
回车=》enter
删除=》delete（捕获“删除”和“退格”键）
退出=》esc
空格=》space
换行=》tab（特殊，必须配合keydown使用）
上=》up
下=》down
左=》left
右=》right
2.vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3.系统修饰键（用法特殊）：Ctrl、alt、shift、meta
1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才会被触发。
2）配合keydown使用：正常触发事件
4.也可以使用keyCode去指定具体的按键（不推荐）
5.Vue.config.keyCode.自定义键名=键码，可以去定制按键别名
<div id="root"><h2>欢迎来到{{name}}</h2><input type="text" placeholder="按下回车提示输入" @keyup.ctrl="showInfo" /><!-- <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo" /> --></div><script type="text/javascript">Vue.config.productionTip=falseVue.config.keyCodes.huiche=13new Vue({el:'#root',data:{name:"召唤师峡谷"},methods:{showInfo(e){// if(e.keyCode!==13) returnconsole.log(e.target.value)}}})</script>计算属性
计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Object.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>{{firstName}}--{{lastName}}</span></div><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{firstName:'张',lastName:'三'}})</script>methods实现
<div id="root">姓：<input type="text" v-model="firstName"><br><br>名：<input type="text" v-model="lastName"><br><br>全名：<span>{{fullName()}}</span></div><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{firstName:'张',lastName:'三'},methods:{fullName(){return this.firstName+this.lastName}}})</script>计算属性实现
<div id="root">姓：<input type="text" v-model="firstName"><br><br>名：<input type="text" v-model="lastName"><br><br>全名：<span>{{fullName}}</span></div><script type="text/javascript">Vue.config.productionTip=falseconst vm=new Vue({el:'#root',data:{firstName:'张',lastName:'三'},computed:{fullName:{// 当有人读取fullName时，get就会被调用，且返回值就作为fullName的值// get什么时候调用？1.初次读取fullName时 2.所依赖的数据发生变化时get(){console.log('get被调用了')return this.firstName+this.lastName},// set什么时候调用？当fullName被修改时set(value){console.log('set'+value)const arr=value.split('-')this.firstName=arr[0]this.lastName=arr[1]}}}})</script>计算属性简写
Vue.config.productionTip = falseconst 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监视
<div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div><script>Vue.config.productionTip = falseconst vm = new Vue({el: '#root',data: {isHot: true},computed: {info() {return this.isHot ? '炎热' : '凉爽'}},methods: {changeWeather() {this.isHot = !this.isHot}},// watch:{// isHot:{// // immediate:true, //初始化时让handler调用一下// // handler什么时候调用？当isHot发生改变时。// handler(newValue,oldValue){// console.log('isHot被修改了',newValue,oldValue)// }// }// }})vm.$watch('isHot', {immediate: true, //初始化时让handler调用一下// handler什么时候调用？当isHot发生改变时。handler(newValue, oldValue) {console.log('isHot被修改了', newValue, oldValue)}})</script>深度监视：
1）vue中的watch默认不监测对象内部值的改变。（一层）。
2）配置deep:true可以检测对象内部值改变（多层）。
备注：
1）vue自身可以检测对象内部值的改变，但vue提供的watch默认不可以。
2）使用watch时根据数据的具体结构，决定是否采用深度监视。
<div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button><hr ><h3>a的值是：{{numbers.a}}</h3><button type="button" @click="numbers.a++">点我让a+1</button><h3>b的值是：{{numbers.b}}</h3><button type="button" @click="numbers.b++">点我让b+1</button></div><script>Vue.config.productionTip = falseconst vm = new Vue({el: '#root',data: {isHot: true,numbers:{a:1,b:1}},computed: {info() {return this.isHot ? '炎热' : '凉爽'}},methods: {changeWeather() {this.isHot = !this.isHot}},watch:{isHot:{// immediate:true, //初始化时让handler调用一下// handler什么时候调用？当isHot发生改变时。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}},// 监视多级结构中某个属性的变化// 'numbers.a':{// handler(){// console.log('a被改变了')// }// },// 监视多级结构中所有属性的变化numbers:{deep:true,handler(){console.log('numbers改变了')}}}})</script>简写
<div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div><script>Vue.config.productionTip = falseconst vm = new Vue({el: '#root',data: {isHot: true,},computed: {info() {return this.isHot ? '炎热' : '凉爽'}},methods: {changeWeather() {this.isHot = !this.isHot}},watch: {// 正常写法// isHot: {// // immediate:true, //初始化时让handler调用一下// // deep:true, //深度监视// handler(newValue, oldValue) {// console.log('isHot被修改了', newValue, oldValue)// }// },// 简写// isHot(newValue,oldValue){// console.log('isHot被修改了', newValue, oldValue)// }}})// vm.$watch('isHot', {// // immediate:true, //初始化时让handler调用一下// // deep:true, //深度监视// handler(newValue, oldValue) {// console.log('isHot被修改了', newValue, oldValue)// }// })vm.$watch('isHot', function(newValue, oldValue) {console.log('isHot被修改了', newValue, oldValue)})</script>绑定样式
绑定样式：
1.class样式
写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
2.style样式
:style="{fontSize:xxx}" 其中xxx是动态值
:style="[a,b]" 其中a、b是样式对象。
<style type="text/css">.basic{width: 200px;height: 150px;border: 5px red solid;}.normal{background-color: #87CEEB;}.happy{background-color: #FFA500;}.sad{background-color: green;}.zhaohuanshi1{background-color: #87CEEB;}.zhaohuanshi2{border-radius: 30px;}.zhaohuanshi3{border: 5px black dashed;}</style><div id="root"><!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --><div class="basic" :class="mood" @click="changeMood()">{{name}}</div><br><!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定，名字也不确定 --><div class="basic" :class="classArr">{{name}}</div><br><!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态觉得用不用 --><div class="basic" :class="classObj">{{name}}</div><br><!-- 绑定style样式--对象写法 --><div class="basic" :style="styleObj">{{name}}</div><!-- 绑定style样式--数组写法 --><div class="basic" :style="[styleObj,styObje2]">{{name}}</div><div class="basic" :style="styleArr">{{name}}</div></div><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{name:'召唤师',mood:'normal',classArr:['zhaohuanshi1','zhaohuanshi2','zhaohuanshi3'],classObj:{zhaohuanshi1:true},styleObj:{fontSize:'40px'},styObje2:{backgroundColor:'red'},styleArr:[{fontSize:'40px'},{backgroundColor:'green'}]},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 type="button" @click="n++">点我n+1</button><!-- 使用v-show做条件渲染 --><h2 v-show="false">欢迎来到{{name}}</h2><!-- 使用v-if做条件渲染 --><h2 v-if="false">欢迎来到{{name}}</h2><!-- v-if和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>javascript</div><!-- v-if与template的配合使用 --><template v-if="n===1"><h2>你好</h2><h2>世界</h2></template></div><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{name:'召唤师峡谷',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) in persons" :key="index">{{p.name}}--{{p.age}}</li></ul><!-- 遍历对象 --><h2>汽车信息</h2><ul><li v-for="(value,k) of cars" :key="k">{{k}}--{{value}}</li></ul><!-- 遍历字符串 --><h2>测试遍历字符串</h2><ul><li v-for="(char,index) of str" :key="index">{{index}}--{{char}}</li></ul><!-- 遍历指定次数 --><h2>测试遍历指定次数</h2><ul><li v-for="(number,index) of 5">{{number}}--{{index}}</li></ul></div><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{persons:[{id:'001',name:'张三',age:18},{id:'002',name:'李四',age:19},{id:'003',name:'王五',age:20}],cars:{name:'奥迪A8',price:'7块',color:'彩色'},str:'hello'}})</script>key的原理
面试题：react、vue中的key有什么作用？（key的内部原理）
1.虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，vue会根据新数据生成新的虚拟DOM，随后vue进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则如下：
2.对比规则：
1）旧虚拟DOM中找到了与新虚拟DOM相同的key：
①若虚拟DOM中内容没变，直接使用之前的真实DOM
②若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
2）旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到页面。
3.用index作为key可能会引发的问题：
1）若对数据进行：逆序添加、逆序删除等破坏顺序操作：
会产生没有必要的真实DOM更新==>界面效果没问题，但效率低。
2）如果结构中还包含输入类的DOM：
会产生错误更新==>界面有问题。
4.开发中如何选择key？
1）最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
<div id="root"><!-- 遍历数组 --><h2>人员列表</h2><button type="button" @click.once="add">添加一个老刘</button><ul><li v-for="(p,index) in persons" :key="p.id">{{p.name}}--{{p.age}}<input type="text"></li></ul></div><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{persons:[{id:'001',name:'张三',age:18},{id:'002',name:'李四',age:19},{id:'003',name:'王五',age:20}],},methods:{add(){const p={id:'004',name:'老刘',age:40}this.persons.unshift(p)}}})</script>列表过滤
<div id="root"><!-- 遍历数组 --><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keywords"><ul><li v-for="(p,index) in filPersons" :key="index">{{p.name}}--{{p.age}}--{{p.sex}}</li></ul></div><script type="text/javascript">Vue.config.productionTip=false// 用watch实现// new Vue({// el:'#root',// data:{// keywords:'',// persons:[// {id:'001',name:'马冬梅',age:18,sex:'女'},// {id:'002',name:'周冬雨',age:19,sex:'女'},// {id:'003',name:'周杰伦',age:20,sex:'男'},// {id:'004',name:'温兆伦',age:21,sex:'男'}// ],// filPersons:[]// },// watch:{// keywords:{// immediate:true,// handler(val){// this.filPersons=this.persons.filter((p)=>{// return p.name.indexOf(val)!=-1// })// }// }// }// })// 用computed实现new Vue({el:'#root',data:{keywords:'',persons:[{id:'001',name:'马冬梅',age:18,sex:'女'},{id:'002',name:'周冬雨',age:19,sex:'女'},{id:'003',name:'周杰伦',age:20,sex:'男'},{id:'004',name:'温兆伦',age:21,sex:'男'}]},computed:{filPersons(){return this.persons.filter((p)=>{return p.name.indexOf(this.keywords)!=-1})}}})</script>列表排序
<div id="root"><!-- 遍历数组 --><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keywords"><button type="button" @click="sortType=2">年龄升序</button><button type="button" @click="sortType=1">年龄降序</button><button type="button" @click="sortType=0">原顺序</button><ul><li v-for="(p,index) in filPersons" :key="p.id">{{p.name}}--{{p.age}}--{{p.sex}}</li></ul></div><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{keywords:'',sortType:0, //0原顺序 1降序 2升序persons:[{id:'001',name:'马冬梅',age:18,sex:'女'},{id:'002',name:'周冬雨',age:19,sex:'女'},{id:'003',name:'周杰伦',age:20,sex:'男'},{id:'004',name:'温兆伦',age:21,sex:'男'}]},computed:{filPersons(){const arr= this.persons.filter((p)=>{return p.name.indexOf(this.keywords)!=-1})// 判断是否需要排序if(this.sortType){arr.sort((p1,p2)=>{return this.sortType===1?p2.age-p1.age:p1.age-p2.age})}return arr}}})</script>模拟一个数据检测
<script type="text/javascript">let data = {name: '北京大学',address: '北京'}// 创建一个监视的实例对象，用于监视data中属性的变化const obs = new Observer(data)console.log(obs)// 准备一个vm实例对象let vm={}vm._data=data=obsfunction Observer(obj) {// 汇众对象中所有的属性形成一个数组const keys = Object.keys(obj)// 遍历keys.forEach((k) => {Object.defineProperty(this, k, {get() {return obj[k]},set(val) {console.log(`${k}被改了，我要去解析模板，生成虚拟DOM....我要开始忙了`)obj[k] = val;}})})}</script>Vue.set的实验
<div id="root"><h1>学校信息</h1><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><h2>校长是：{{leader}}</h2><hr ><h1>学生信息</h1><button type="button" @click="addSex">添加一个性别属性，默认值是男</button><h2>学生姓名：{{student.name}}</h2><h2 v-if="student.sex">学生性别：{{student.sex}}</h2><h2>学生年龄：真实{{student.age.rAge}}，对外{{student.age.rAge}}</h2><h2>朋友们</h2><ul><li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul></div><script type="text/javascript">Vue.config.productionTip=falseconst vm=new Vue({el:'#root',data:{name:'北京大学',address:'北京',student:{name:'Tom',age:{rAge:40,sAge:29},friends:[{name:'Jerry',age:35},{name:'Tony',age:36}]}},methods:{addSex(){// Vue.set(this.student,'sex','男')this.$set(this.student,'sex','男')}}})</script>总结vue数据检测
vue监视数据的原理：
1.vue会监视data中所有层次的数据。
2.如何检测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
1）对象中后追加的属性，vue默认不做响应式处理
2）如需给后添加的属性做响应式，请使用如下API：
Vue.set(target,propertyName/index,value)或
vm.$set(target,propertyName/index,value)
3.如何检测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
1）调用原生对应的方法对数组进行更新。
2）重新解析模板，进而更新页面
4.在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set()或vm.$set
特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性！！！
<div id="root"><h1>学生信息</h1><button type="button" @click="student.age++">年龄+1岁</button><br><button type="button" @click="addSex">添加性别属性，默认值：男</button><br><button type="button" @click="student.sex='未知'">修改性别</button><br><button type="button" @click.once="addFriend">在列表首位添加一个朋友</button><br><button type="button" @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button><br><button type="button" @click="addHobby">添加一个爱好</button><br><button type="button" @click="updateHobby">修改第一个爱好为：开车</button><br><button type="button" @click="removeSmoke">过滤掉爱好中的抽烟</button><h2>学生姓名：{{student.name}}</h2><h2>学生年龄：{{student.age}}</h2><h2 v-if="student.sex">学生性别：{{student.sex}}</h2><h2>爱好</h2><ul><li v-for="(h,index) in student.hobby" :key="index">{{h}}</li></ul><h2>朋友们</h2><ul><li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul></div><script type="text/javascript">Vue.config.productionTip=falseconst vm=new Vue({el:'#root',data:{student:{name:'Tom',age:18,hobby:['抽烟','喝酒','烫头'],friends:[{name:'Jerry',age:35},{name:'Tony',age:36}]}},methods:{addSex(){// Vue.set(this.student,'sex','男')this.$set(this.student,'sex','男')},addFriend(){this.student.friends.unshift({name:'jack',age:70})},updateFirstFriendName(){this.student.friends[0].name='张三'},addHobby(){this.student.hobby.push('学习')},updateHobby(){// this.student.hobby.splice(0,1,'开车')// Vue.set(this.student.hobby,0,'开车')this.$set(this.student.hobby,0,'开车')},removeSmoke(){this.student.hobby=this.student.hobby.filter((h)=>{return h!='抽烟'})}}})</script>收集表单数据
收集表单数据：
若：<input type="text">，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio">，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox">
1.没有配置input的value属性，则v-model收集的就是checked（勾选or未勾选，是布尔值）
2.配置input的value属性：
1）v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值）
2）v-model的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
<div id="root"><form @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" v-model='userInfo.sex' value="male" />女<input type="radio" name="sex" v-model='userInfo.sex' value="female" /><br>爱好：学习<input type="checkbox" v-model="userInfo.hobby" value="study"/>打游戏<input type="checkbox" v-model="userInfo.hobby" value="game"/>吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"/><br>所属校区<select v-model="userInfo.city"><option value="">请选择校区</option><option value ="beijing">北京</option><option value ="shanghai">上海</option><option value ="shenzhen">深圳</option><option value ="wuhan">武汉</option></select><br>其他信息：<textarea v-model.lazy="userInfo.other"></textarea><br><input type="checkbox" v-model="userInfo.agree" />阅读并接收<a href="">《用户协议》</a><br><button type="submit">提交</button></form></div><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:"#root",data:{userInfo:{account:'',password:'',age:'',sex:'female',hobby:[],city:'',other:'',agree:""}},methods:{demo(){console.log(JSON.stringify(this.userInfo))}}})</script>过滤器
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1.注册过滤器：Vue.filter(name,callback)或 new Vue{filters:{}}
2.使用过滤器：{{xxx | 过滤器名}}或v-bind:属性="xxx | 过滤器名"
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应的数据
<div id="root"><h2>显示格式化后的时间</h2><!-- 计算属性实现 --><h3>现在是：{{fmtTime}}</h3><!-- methods实现 --><h3>现在是：{{getFmtTime()}}</h3><!-- 过滤器实现 --><h3>现在是：{{time | timeFormater}}</h3><!-- 过滤器实现（传参） --><h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3></div><div id="root2"><h2>{{msg | mySlice}}</h2></div><script type="text/javascript">Vue.config.productionTip=false// 全局过滤器Vue.filter('mySlice',function(value){return value.slice(0,4)})new Vue({el:'#root',data:{time:Date.now()},computed:{fmtTime(){return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')}},methods:{getFmtTime(){return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')}},filters:{timeFormater(value,str='YYYY-MM-DD HH:mm:ss'){return dayjs(value).format(str)}}})new Vue({el:'#root2',data:{msg:'hello world'}})</script>内置指令
v-text指令：
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换节点中的内容，{{xx}}则不会。
<div id="root"><div>{{name}}</div><div v-text="name"></div><div v-text="str"></div></div><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{name:'你好世界',str:'<h3>你好</h3>'}})</script>v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
1）v-html会替换掉节点中所有的内容，{{xx}}则不会
2）v-html可以识别html结构
3.严重注意：v-html有安全性问题！！！
1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
2）一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！
<div id="root"><div v-text="name"></div><div v-html="str"></div><div v-html="str2"></div></div><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{name:'你好世界',str:'<h3>你好</h3>',str2:'<a href=javascript:location.href="http://www.baidu.com">世界</a>'}})</script>v-cloak指令（没有值）：
1.本质是一个特殊属性，vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
<div id="root"><h2 v-cloak>{{name}}</h2></div><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{name:''}})</script>v-once指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
<div id="root"><h2 v-once>初始化的n值是：{{n}}</h2><h2>当前的n值是：{{n}}</h2><button type="button" @click="n++">点我n+1</button></div><script type="text/javascript">new Vue({el:'#root',data:{n:1}})</script>v-pre指令：
1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
<div id="root"><h2 v-pre>vue其实很简单</h2><h2 v-pre>当前的n值是：{{n}}</h2><button v-pre @click="n++">点我n+1</button></div><script type="text/javascript">new Vue({el:'#root',data:{n:1}})</script>自定义指令
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
<div id="root"><h2>当前的n值是：<span v-text="n"></span></h2><h2>放大10倍后的n值是：<span v-big="n"></span></h2><button type="button" @click="n++">点我n+1</button><hr><input type="text" v-fbind:value="n" /></div><script type="text/javascript">Vue.config.productionTip = falseVue.directive('fbind',{// 指令与元素成功绑定时（一上来）bind(element, binding) {element.value=binding.value},// 指令所在元素被插入页面时inserted(element, binding) {element.focus()},// 指令所在模板被重新解析时update(element, binding) {element.value=binding.value}})new Vue({el: '#root',data: {n: 1},directives: {// big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。big(element, binding) {console.log('big',this) //此处的this是windowelement.innerText = binding.value * 10},// fbind: {// // 指令与元素成功绑定时（一上来）// bind(element, binding) {// element.value=binding.value// },// // 指令所在元素被插入页面时// inserted(element, binding) {// element.focus()// },// // 指令所在模板被重新解析时// update(element, binding) {// element.value=binding.value// }// }}})</script>
自定义指令总结：
一、定义语法：
1）局部指令：
new Vue({
directives:{指令名:配置对象}
})
或
new Vue({
directives(){指令名:回调函数}
})
2）全局指令：
Vue.directive(指令名,配置对象)
或
Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调：
1）bind：指令与元素成功绑定时调用。
2）inserted：指令所在元素被插入页面时调用。
3）update：指令所在模板结构被重新解析时调用。
三、备注：
1.指令定义时不加v-，但使用时要加v-。
2.指令如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
生命周期
生命周期：
1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么：vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm或组件实例对象。
<div id="root"><h2>当前的n值时候：{{n}}</h2><button type="button" @click="add">点我n+1</button><button type="button" @click="bye">点我销毁vm</button></div><script type="text/javascript">Vue.config.productionTip=falsenew Vue({el:'#root',data:{n:0},methods:{add(){this.n++},bye(){this.$destroy()}},beforeCreate(){console.log('beforeCreate')},created(){console.log('created')},beforeMount(){console.log('beforeMount')},mounted(){console.log('mounted')},beforeUpdate(){console.log('beforeUpdate')},updated(){console.log('updated')},beforeDestroy(){console.log('beforeDestroy')},destroyed(){console.log('destroyed')}})</script>常用的生命周期钩子：
1.mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作。
2.beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等收尾工作。
关于销毁vue实例
1.销毁后借助vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了。
