1.条件指令 <div id="app"> <p v-if="r1" key="p_r1">if条件</p> <p v-show="r2">show条件</p> <!--{{ num + 1 - 5 * 2 + '好的' }}--> <ul> <!--v-else会默认与v-if等有条件的分支绑定--> <!--v-else-if必须由条件才和有条件v-if分支绑定--> <li v-if="tag == 1">111</li> <li v-else-if="tag == 2">222</li> <li v-else>333</li> </ul> <ul> <li @click="action('a')">a</li> <li @click="action('b')">b</li> <li @click="action('c')">c</li> </ul> <ul> <li v-show="flag == 'a'">aaa</li> <li v-show="flag == 'b'">bbb</li> <li v-show="flag == 'c'">ccc</li> </ul> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { num: 10, r1: false, r2: false, tag: 2, flag: 'a' }, methods: { action: function (s) { this.flag = s //实现点击事件切换显示的数值 } } }) </script>
2、循环指令 <div id="app"> <p>{{ nums[2] }}</p> <ul> <!-- 只遍历值 --> <li v-for="num in nums">{{ num }}</li> </ul> <ul> <!-- 值与索引 --> <li v-for="(num, index) in nums">{{ num }} {{ index }}</li> </ul> <ul> <!-- 值,键,索引 --> <li v-for="(v, k, i) in people">{{ v }} {{ k }} {{ i }}</li> // 成行打印 </ul> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { nums: [5, 3, 2, 1, 4], people: { 'name': 'Owen', 'age': 17.5, 'gender': 'others' } } }) </script>
3、splice的用法 splice(start: number, deleteCount: number, ...items: T[]): T[]; eg1: k = [1,2,3,4,5] k.splice(0,0,11) # 从索引为0的位置,操作0位,将其元素改变为第三个元素及其后的元素 结果如下: k=[11, 22, 1, 2, 3, 4, 5] eg2: k = [1,2,3,4,5] k.splice(1,2,22,33) 结果如下: k = [1,22,33,4,5]
4、评论案例 通过ajax拿到值,应该可以更好的处理评论楼的样式 <style> span { margin-left: 100px; cursor: pointer; // 改变光标的类型,效果明显 color: green; } span:hover { color: red; } </style> <div id="app"> <p> <input type="text" v-model="val"> <button @click="add">评论</button> </p> <ul> <li v-for="(info, i) in infos"> {{ info }} <span @click="del(i)">x</span> </li> </ul> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { infos: [], // 管理所有留言 val: '' // 管理当前留言 }, methods: { add: function () { let val = this.val; if (val) { this.infos.splice(0, 0, val); // 留言 this.val = '' // 输入框置空 } }, del: function (i) { // splice: 从哪个索引开始 操作的位数 操作成的结果(可变长) this.infos.splice(i, 1) // 删除留言 } } }) </script>
5、实例成员之computed <div id="app"> <p> 姓:<input type="text" v-model="first_name"> 名:<input type="text" v-model="last_name"> </p> <p> 姓名:<b>{{ full_name }}</b> </p> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { first_name: '', last_name: '', }, computed: { // 1.在computed中定义的变量的值等于绑定的函数的返回值 // 2.绑定的函数中出现的所有vue变量都会被监听 full_name: function () { console.log('被调用了'); //输入框内的数值只要改变,就会打印该字符串 return this.first_name + this.last_name; } } }) </script>
6、实际例成员之watch <div id="app"> <p> 姓名:<input type="text" v-model="full_name"> </p> <p> 姓:<b>{{ first_name }}</b> 名:<b>{{ last_name }}</b> </p> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { full_name: '', first_name: '', last_name: '' }, watch: { // 1.后方绑定的函数就是监听前方的变量,变量值改变,函数被调用 full_name: function () { let res = this.full_name.split(''); this.first_name = res[0]; this.last_name = res[1]; } } })
7、解决插值表达式符号冲突 <div id="app"> ${ msg } // 设置完后,其值为 ‘12345’ </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: '12345' }, delimiters: ['${', '}'] // 设置完后,可以利用该方式在vue里使用 }) </script>
总结: 指令: 文本:{{}} v-text v-html v-once 属性:v-bind:href | :href :class='c1' :class='[c1, c2]' :style='s1' (s1={color: "red"}) 事件:v-on:click | @click @click="action" @click="action(msg)" @click="action($event)" 表单:v-model 条件:v-show v-if v-else-if v-else 循环:v-for="(value, index) in list" v-for="(value, key, index) in dict" 成员: el:挂载点 data:数据 methods:方法 computed:计算 -- 监听方法内所有的变量,返回值给绑定的变量,该变量无需在data中声明 watch:监听 -- 监听绑定的变量,绑定的变量必须在data中声明
8、组件 组件:有html模板,有css样式,有js逻辑的集合体 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,子组件必须自己定义template(局部子组件、全局子组件 每个组件模板只能且必须拥有一个根标签 子组件的数据具有作用域,以达到组件的复用
扫描二维码关注公众号,回复:
6660777 查看本文章
9、根组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script type="text/javascript"> // 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件) // 每个组件组件均拥有模板,template var app = new Vue({ // 根组件的模板就是挂载点 el: "#app", data : { msg: "根组件" }, // 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量 // 显式书写模块,就会替换挂载点,但根组件必须拥有挂载点 template: "<div>显式模板</div>" }) // app.$template </script>
10、局部组件 <div id="app"> <!--div.box>h1{标题}+(p.p${文本内容}*2)--> // 生成标签的快捷方式 <abc></abc> // 两个局部组件,数据并不同步 <abc></abc> </div> <script src="js/vue.js"></script> <script> // 定义局部组件 let localTag = { // 1.data要达到组件的复用,必须为每个组件提供一个名称空间(作用域) // 2.data的值就是一个存放数据的字典 // 需要满足1和2,data值为一个可以产生名称空间的函数的返回值,返回值是字典 data: function () { return { count: 0, // r: '' } }, template: ` <div class="box" style="border: solid; width: 100px"> <h1>标题</h1> <p class="p1">文本内容</p> <p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p> <button @click="send">提交</button> </div> `, methods: { action: function () { this.count++ }, // 结合JQ完成组件与后台的交互 // send: function () { // $.ajax({ // url:, // type:, // data:, // success: function (result) { // this.r = result // } // }) // }, // watch: { // r: function () { // // } // } } }; new Vue({ el: '#app', data: { }, // 局部组件必须注册 components: { 'abc': localTag } }) </script>
11、全局组件 <div id="app"> <!--在标签中建议使用 - 语法命名,对应js中就是驼峰命名--> <old-boy></old-boy> </div> <script src="js/vue.js"></script> <script> // Vue.component(组件名, {组件主体}); Vue.component('oldBoy', { data: function () { return { count: 0 } }, template: ` <div class="box" style="border: solid; width: 100px"> <h1>全局</h1> <p class="p1">文本内容</p> <p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p> </div> `, methods: { action: function () { this.count++ }, } }); // 全局组件无需注册 new Vue({ el: '#app', data: { } }) </script>
12、组件间的交互:父传子 <div id="app"> <!-- local-tag就可以理解为自定义标签,msg变量值由父组件提供 --> <!-- local-tag标签代表的是子组件,owen为标签的自定义属性 --> <!-- 在子组件内部能拿到owen,就可以拿到父组件的信息 --> <local-tag :owen="msg"></local-tag> </div> </body> <script src="js/vue.js"></script> <script> let localTag = { // 子组件拿自定义属性 props: ['owen'], template: ` <div> <h1>信息</h1> <p>{{ owen }}</p> </div> ` }; new Vue({ el: '#app', data: { msg: '父级的信息' }, components: { // 'localTag': localTag, 当二者同名时,可以简写 // localTag: localTag, localTag // 在页面中 <local-tag> } }) </script>
13、 组件间的交互:子传父 通过发送事件请求的方式进行数据传递 <div id="app"> <h1>{{ title }}</h1> <global-tag @recv="get_title"></global-tag> </div> </body> <script src="js/vue.js"></script> <script> Vue.component('global-tag', { template: ` <div> <input type="text" v-model="msg"> <!--<button @click="action">修改标题</button>--> </div> `, data: function () { return { msg: '' } }, methods: { // 这种更原始 // action: function () { // let msg = this.msg; // // recv是自定义的事件 // this.$emit('recv', msg) // } }, watch: { //这种更简单 msg: function () { // 只要msg只有变化,就将值同步给父组件 this.$emit('recv', this.msg) } } }); new Vue({ el: '#app', data: { title: '父组件定义的标题' }, methods: { get_title: function (msg) { this.title = msg } } }) </script>