Vue基础(一) 基础用法
1.取消生产提示
Vue.config.productionTip = false;
Vue.config.devtools = true; //运行开发调试2.hello小案例
需要注意如下几点：
1.必须要有一个模板，其实就是一个html组件
2.新建一个Vue实例，并且通过el与容器建立绑定关系，容器里面就是css的选择器写法。
3.模板里面可以通{{}}插值表达式来获取容器中的对象，里面可以写js的表达式，并且data里面的内容发生改变后，容器数据也会变化。
<div id="root"><h1>{{name}}</h1></div><script>Vue.config.productionTip = false;Vue.config.devtools = true;new Vue({el: '#root', //和一个容器建立绑定关系data: {name:'尚硅谷'}})</script>3.数据绑定
3.1 插值语法
作用：单向绑定，并且只能放在标签值中
<!-- 方式一：插值语法 --><div id="root"><h1>hello,{{name}}</h1></div><script>new Vue({el: '#root',data:{name:'张三'}})</script>3.2 v-bind
作用：单向绑定，可以绑定值也可以绑定内容比如v-bind:style="name"可以简写为:style="name"
<div id="root"><!-- <input type="text" v-bind:value="name"> --><input type="text" :value="name"></div><script>new Vue({el: '#root',data:{name:'张三'}})</script>3.3 v-model
作用：双向绑定，只可以绑定可以输入内容的value属性，比如v-model:value="name"可以简写为:v-model="name"
<div id="root"><input type="text" v-model:value="name"></div><script>new Vue({el:"#root",data:{name:"张三"}})</script>4.模板和Vue实例的绑定
4.1 通过el方式绑定
<div id="root"><input type="text" v-model="name"></div><script>Vue.config.devtools = true;new Vue({el: '#root',data: {name: "张三"}}) </script>4.2 通过$mount的方式绑定
<div id="root"><input type="text" v-model="name"></div><script>Vue.config.devtools = true;let vm = new Vue({el: '#root',data: {name: "张三"}}) vm.$mount('root')</script>7.计算属性
7.1 计算属性的基本使用
定义:计算属性本来不存在，需要根据其他属性计算得出。
优势：计算属性相比于methods方法可以走缓存。
用法：第一次渲染或者计算属性所依赖的值发生改变的时候，会进行计算得到新值，调用get方法。
7.2 计算属性的基本使用
new Vue({el: "#root",data: {firstName: "",lastName: ""},computed: {fullName: {get() {return this.firstName + "-" + this.lastName;},set(value) {//修改逻辑}}}})7.3 计算属性的简写
new Vue({el: "#root",data: {firstName: "",lastName: ""},computed: {fullName() {return this.firstName + "-" + this.lastName;}}})8.监视属性
8.1 监视属性基本用法
1.注意点
1.监视属性表示当属性发生变化的时候会触发回调方法。
2.监视的属性必须存在，才能被监视
2.基本写法
new Vue({el: "#root",data: {weather: "真好",isHot: true},watch: {isHot: {handler(newval, oldval) {console.log(newval, oldval)this.weather = "真冷"}}}})或者新建完vm后绑定
let vm = new Vue({el: "#root",data: {weather: "真好",isHot: true}// watch: {// isHot: {// handler(newval, oldval) {// console.log(newval, oldval)// this.weather = "真冷"// }// }// }})vm.$watch('isHot',{immediate: true,handler(newval, oldval) {console.log(newval, oldval)}})8.2 深度监视
let vm = new Vue({el: "#root",data: {weather: "真好",isHot: true,number: {a: 1,b: 2}},watch: {number: {deep: true, //如果是个多级对象，需要用deep来表示监听对象里面的内容handler(newval, oldval) {console.log(newval, oldval)}}}})8.3 监视属性简写
let vm = new Vue({el: "#root",data: {weather: "真好",isHot: true,number: {a: 1,b: 2}},watch: {isHot(newval, oldval) {console.log(newval, oldval)}}})8.4 监视属性和计算属性的区别
计算属性能干的监视属性都能做，但是监视属性能够实现某些功能（比如某个值发生改变，产生的影响定时触发）
9.vue中函数的写法
1.如果是vue实例管理的函数，写普通函数，vue保证这些函数的this是vue实例或者VueComponent实例。
2.如果是其他函数，比如ajax回调函数，promise回调函数，定时器回调函数写箭头函数。
10.vue中的动态样式
<div id="root"><div :class="classObj"></div><div :style="styleObj"></div></div><script>let vm = new Vue({el: "#root",data: {className:'red', //适用于样式名称不确定classArr:['pink1','pink2','pink3'], //适用于样式名称和个数不确定classObj:{ //适用于名称个数确定，但是用不用不确定'red':true,"blue":false},styleObj:{fontSize:10+'px'}}})11.条件渲染
<div id="root"><div v-show="a === 1">1</div> //表示a为1的时候才会展示<div v-if="a === 1">1</div> //如果第一个判断满足，后面的逻辑便不会走<div v-else-if="a === 2">2</div><div v-else>3</div></div><script>let vm = new Vue({el: "#root",data: {a: 1}})
注意：v-show是隐藏掉元素，但是v-if是元素不存在。
12.for循环
12.1 基本使用
其中user表示元素，index表示索引，从0开始
<div id="root"><ul><li v-for="(user,index) in users" :key="user.id">{{user.name}}</li></ul></div><script>new Vue({el: "#root",data: {users: [{ id: 1, name: "张三", age: 12 },{ id: 2, name: "李四", age: 33 },{ id: 3, name: "王五", age: 24 },]}})</script>12.2 key的作用
Vue渲染的步骤如下:
1.如果数据发生变化，Vue会根据数据生成新的虚拟Dom，并且将key作为该Dom的唯一标识。
2.根据Dom进行相同Key的比较，入股以前的Dom存在，便会用以前的Dom进行渲染，如果未找到，便会创建新的虚拟Dom。
所以在选择Key的时候，尽量选择唯一id作为key。
12.3 列表的作用
1.关键词搜索
<div id="root"><input type="text" v-model="keyword"><button>升序</button><button>降序</button><button>原来顺序</button><ul><li v-for="(user,index) in filPerson" :key="user.id">{{user.name}}</li></ul></div><script>new Vue({el: "#root",data: {keyword: "",users: [{ id: 1, name: "张三", age: 12 },{ id: 2, name: "李四", age: 33 },{ id: 3, name: "王五", age: 24 },{ id: 4, name: "张冬梅", age: 2 }]},computed: {filPerson() {return this.users.filter(user => { return user.name.indexOf(this.keyword) !== -1 })}}})2.排序
<div id="root"><input type="text" v-model="keyword"><button @click="sortType = 'asc'">升序</button> <button @click="sortType = 'desc'"> 降序</button><button @click="sortType=''">原来顺序</button><ul><li v-for=" (user,index) in filPerson" :key="user.id">{{user.name}}--{{user.age}}</li></ul></div><script>new Vue({el: "#root",data: {keyword: "",sortType: "",users: [{ id: 1, name: "张三", age: 12 },{ id: 2, name: "李四", age: 33 },{ id: 3, name: "王五", age: 24 },{ id: 4, name: "张冬梅", age: 2 }]},computed: {filPerson() {console.log("sortType=", this.sortType)const arr = this.users.filter(user => { return user.name.indexOf(this.keyword) !== -1 })if (this.sortType === "asc") {arr.sort((p1, p2) => {return p1.age - p2.age})} else {arr.sort((p1, p2) => {return p2.age - p1.age})}return arr}}})13. Vue是如何监视数据的
13.1 Vue是如何监视数据的
数据劫持，也就是会给实例中的每个属性生成set和get方法，当值发生改变的时候，会调用setter方法，重新解析模板。
如果是必须是在Vue实例创建时的属性才能被劫持，后面添加的属性不会被监视,必须要用Vue.set才能添加属性。
<script>let vm = new Vue({el: "#root",data: {user: {name: "张三"}},methods: {addAge() {Vue.set(this.user, "age", 12)}}})</script>注意:上面不能给Vue实例和Vue中的data添加属性。
13.2 Vue如何检测数组
可以使用push，pop，shift，unshift，reverse等方法可以被监听。
14.如何收集表单中的数据
<div id="root"><!-- 提交表单的时候一定会触发提交时间，可以给提交事件绑定方法 --><form @submit.prevent="submit"><!-- 如果可以有文本输入便，直接v-model会自动绑定里面的value属性 -->账号: <input type="text" name="username" v-model="user.userName"> <br>密码：<input type="password" name="pwd" v-model="user.password"> <br><!-- v-model.number可以将收集到的数据直接转换成number类型 -->年龄：<input type="number" name="age" v-model.number="user.age"> <br><!-- 如果是单选 没有value值，可以给他设置一个value值,再用v-model进行绑定 -->性别: 男<input type="radio" name="sex" v-model="user.sex" value="male">女<input type="radio" name="sex" v-model="user.sex" value="female"> <br><!-- 如果是多选，也需要一个value值，来表示每个选项的内容，并且v-model进行绑定，并且接收内容需要是一个数组 -->爱好: 吃饭<input type="checkbox" v-model="user.hobby" value="eat">睡觉<input type="checkbox" v-model="user.hobby" value="sleep">打豆豆<input type="checkbox" v-model="user.hobby" value="dadoudou"><br>所属校区: <select v-model="user.area"><option value="北京">北京</option><option value="上海">上海</option><option value="重庆">重庆</option></select><br><!-- 加上lazy表示失去焦点才收集数据 -->其他信息：<textarea v-model.lazy="user.other"></textarea> <br>我接受协议<input type="checkbox" name="" id=""><button>提交</button></form></div><script>let vm = new Vue({el: "#root",data: {user: {userName: "",password: "",age: "",sex: "",hobby: [],area: "",other: ""}},methods:{submit() {window.alert("提交数据")}}})</script>15.过滤器
15.1 局部过滤器
只能在该组件内使用
<body><div id="root"><h4>{{this.name | spliceStr}}</h4></div><script>new Vue({el:"#root",data:{name:"1234567890"},filters:{spliceStr(value) {console.log(value)return value.slice(0,5)}}})</script></body>15.2 全局过滤器
能够在所有的vue组件里面使用
<script>Vue.filter('spliceStr',function(value){console.log(value)return value.slice(0,5)})new Vue({el:"#root",data:{name:"1234567890"},// filters:{// spliceStr(value) {// console.log(value)// return value.slice(0,5)// }// }})</script>16. Vue的内置指令
16.1 v-text
v-text=“text”其实就是将text当成一个文本，放到dom节点中间。类似于以前的innerText
16.2 v-html
v-html="html"其实就是将html当做html一个dom节点，放到当前dom节点中间，类似于以前的innerHtml，但是该方法存在xss漏洞。
16.3 v-once
v-once绑定的属性，表示第一次需要动态解析过后，后面值便固定写死
16.4 v-cloak
如果vue加载js资源特别慢，会直接将html渲染上去，然后解析vue中的js代码，然后再将vue中的插值语法给替换掉，会有让用户看到vue中的代码。可以给标签加上v-cloak，加上后，在解析完成vue过后，会删掉该标签。可以结合css代码使用。
[v-cloak] {display:false
}16.5 v-pre
v-pre标签加上过后，会跳过编译，如果没有vue标签或者插值语法，可以加上该标签，提高编译速度。
17. vue自定义命令
17.1 自定义命令的基本用法
可以在directives里面写自定义方法，比如big方法，然后可以利用v-big来作为指令绑定元素。
注意:
1.big方法会接受两个参数，分别是element，表示的是v-big绑定的dom标签，binding表示的是v-big后面表达式的内容。
2.采用函数写法，只会在指令与标签绑定时，以及指令所在模板重新解析时会调用该方法。
<body><div id="root"><h2>当前我的值为{{n}}</h2>放大10倍后的值为:<h3 v-big="n"></h3> <br><button @click="n++">点我加1</button></div><script>let vm = new Vue({el:'#root',data() {return {n:1}},directives:{big(elment,binding) {console.log(elment,binding.value)elment.innerText=10 * binding.value}}})</script>17.2 自定义命令的完整写法
let vm = new Vue({el:'#root',data() {return {n:1}},directives:{big(elment,binding) {console.log(elment,binding.value)elment.value=10 * binding.value//并且自动获取焦点elment.focus()}}})比如上面的代码，按理说应该在执行big方法的时候，获取焦点，但是因为这种写法只会在命令与模板绑定，更新模板的时候会执行big函数，此时元素还未插入模板，所以并不会执行自动获获取焦点。
<script>let vm = new Vue({el: '#root',data() {return {n: 1}},directives: {big: {bind(elment, binding) {console.log(elment, binding.value)elment.value = 10 * binding.value//并且自动获取焦点elment.focus()},inserted(elment, binding) {console.log(elment, binding.value)elment.value = 10 * binding.value//并且自动获取焦点elment.focus()},update(elment, binding) {console.log(elment, binding.value)elment.value = 10 * binding.value//并且自动获取焦点elment.focus()}}}})</script>注意:
1.这里bind表示指令与标签绑定时执行该方法
2.inserted表示插入模板时执行该方法
3.update表示更新模板时执行该方法