vue基础
一、基础语法
用vue首先下载vue，可到官网下载
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--模板语法--> <h2>{{ mag }}</h2> <h2 style="color: red">{{ person }}</h2> <h3>{{ person.name }}</h3> <h3 style="color: blue">{{ mag2 }}</h3> <h3>{{ 1+1 }}</h3> <h4>{{ {'name':'alex'} }}</h4> <h2>{{ 1>2? '真的': '假的' }}</h2> <!--渲染标签要用到系统指令--> <div>{{ text }}</div> <div v-html="text"></div> </div> <!--1，引vue--> <script src="vue.js"></script> <script> // 2实例化对象 new Vue({ //当前对象绑定的根元素 el:"#app", // 数据属性 data:{ mag:"我是mag", person:{ name:"zwq" }, mag2:"hello vue", // 标签数据 text:'<h2>yuan</h2>' } }) </script> </body> </html>
二、指令系统
//常用 v-text 将数据解释为普通文本 v-html 可以输出真正的 HTML 标签也可以将数据解释为文本 v-if “真正”的条件渲染 v-show 基于 CSS 进行切换，display：none。
v-for //保存数组或者对象 格式 用v-for要 用key绑定一个唯一值如 :key= index v-for = '(item,index) in menuList' v-for = '(value,key) in object' //item指的是数组中每项元素
v-bind 可以绑定标签中任何属性 简写：v-bind:src 等价于 :src
v-on 可以监听js中所有事件 简写：v-on:click 等价于 @click
表单输入绑定 v-model 双向数据绑定 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-if与v-show的区别
v-if 是“真正”的条件渲染，在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
三、组件的使用
全局组件的使用
Vue.component('全局组件的名字',
{ 根new Vue() 实例化对象中的options是一样，但是要注意： 不管是公共组件还是局部组件 data必须是个函数 函数一定要返回 {} })
<slot> 元素作为承载分发内容的出口 <slot></slot> slot是vue中提供的内置组件它会去分发 内容
template:`
<button><slot></slot></button>`
})
局部组件的使用
//1.声名组件 var App = { tempalte:` <div class='app'></div>` }; new Vue({ el:"#app", //3.用组件 template:<App /> //2.挂载组件 components:{ App } })
组件的数据传递
（1）父组件向子组件传递数据:通过Prop
1.在子组件中通过props声明需要传递的数据。props:['自定义的属性1','自定义属性2']；
当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性,那么我们就可以像访问data中的值一样
2.在父组件的子组件中自定义属性。<Vheader :title = '父组件中data声明的数据属性'/>
注意:一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。
（2）子==》父
1.给子组件中的某个按钮绑定原声事件,。我们可以调用内建的 this.$emit('自定义的事件名','传递的数据')，来向父级组件触发一个自定义的事件.
2.在父组件中的子组件标签中 要绑定自定义的事件,
（3）平行组件传值（借助一个空对象进行组件间传值）
使用$on()和$emit() 绑定的是同一个实例化对象
A===>B组件传值
1、A组件中使用$emit('事件的名字',值) 抛出事件
2、B组件中要使用$on(‘事件的名字’,function(){})
vm.$on() 监听当前实例上的自定义事件，事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
<div id="app"> <!--使用组件--> <my-acom></my-acom> <hr> <my-bcom></my-bcom> </div> <script src="vue.js"></script> <script> // 借助一个空的Vue对象实现组件间通信 let bus = new Vue(); //组件A let A = { template:` <div> <h1>这是 子组件： A </h1> <p>A被选中的次数：{{ num }}</p> </div> `, data(){ return { num: 0 } }, // 生命周期钩子函数 mounted(){ // 在文档准备就绪之后就要开始监听bus是否触发了 xuanwo 的事件 // $on() 监听当前实例上的自定义事件,事件可以 由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 bus.$on('xuanwo', (val)=> { // this.num += 1; // ? console.log(val); console.log(this); // this 是组件A this.num = val; }) } }; let B = { template: ` <div> <h1>这是 子组件：B </h1> <button v-on:click="add">选我</button> </div> `, data(){ return { num: 0 } }, methods:{ add(){ this.num += 1; // 利用bus对象抛出一个自定义事件 bus.$emit('事件名',数据) bus.$emit('xuanwo', this.num); } } }; // 根实例，挂载组建 new Vue({ el: '#app', data: { totalNum: 0 }, components: { 'my-acom': A, 'my-bcom':B, }, }) </script>
组件的注意事项：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <table> <tbody> <tr is="my-tr"></tr> </tbody> </table> </div> <script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script> <script> // 注册全局组件 Vue.component('my-tr', { template: `<tr v-on:click="add">{{ this.num }}</tr>`, data: function () { return { num: 0 } }, methods: { add() { this.num += 1; } } }); let app = new Vue({ el: '#app', }) </script> </body> </html>
2.组件中的data必须是函数！！！保证每个组件内部的数据都是独立的！
四、过滤器的使用
局部过滤器
//1.注册局部过滤器 在组件对象中定义 filters:{ '过滤器的名字':function(value){ } } //2.使用过滤器 使用管道符 | {{price | '过滤器的名字'}}
全局过滤器
// 注册全局的过滤器 //第一个参数是过滤器的名字，第二个参数是执行的操作 Vue.filter('reverse',function(value) { return value.split('').reverse().join(''); }); //使用跟 局部过滤器一样
练习：小清单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小清单</title> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"> <style> .done { color: green; } .done1 { text-decoration: line-through; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="panel panel-info"> <div class="panel-heading">小清单</div> <div class="panel-body"> <div id="todolist"> <!--应用form表单回车也可以提交数据，但要阻止重载页面，提交事件不再重载页面用到时间修饰符prevent--> <form action="" @submit.prevent="add"> <div class="input-group"> <input v-model="current.title" type="text" class="form-control" placeholder="请输入待办事项..." > <span class="input-group-btn"> <button class="btn btn-default" type="button" @click="add" > <span class="glyphicon glyphicon-plus"></span> </button> </span> </div><!-- /input-group --> </form> <hr> <ul class="list-group"> <li class="list-group-item" v-for="(item, index) in todo" :key="index" :class="{ done1: item.status }" > <span class=" glyphicon glyphicon-ok-sign" :class="{ done: item.status }" @click="done(index)" ></span>{{ item.title }} <span class="glyphicon glyphicon-remove-sign pull-right" @click="del(index)"></span> </li> </ul> </div> </div> </div> </div> </div> </div> <script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script> <script> let app= new Vue({ el: '#todolist', data: { todo:[ {"title": '吃饭', 'status': false}, {"title": '睡觉', 'status': false}, {"title": '打豆豆', 'status': false}, {"title": '洗澡', 'status': false}, ], current:{'title':'', 'status':false} }, methods:{ add(){ // trim 去掉字符串前后端空格 if(this.current.title.trim() === ''){ return } this.todo.push(this.current); this.current = {'title':'', 'status':false}; }, done(index){ // 完成的事项，图标变绿文本划掉 this.todo[index].status = true }, del(index){ // 删除事项 根据索引删除splice(起始索引, 删除数据的个数 ) this.todo.splice(index, 1) } } }) </script> </body> </html>
