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表示更新模板时执行该方法