使用v-for遍历data中的列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="item in movies">{{item}}</li> </ul> </div> <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> new Vue({ el:"#app", data:{ message:"Vue.js初体验", movies:['星际穿越','大话西游','少年派','盗梦空间'], } }) </script> </body> </html>效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5z8P8utm-1603358537500)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200905233643497.png)]
@click="increment"是v-on:click="increment"的语法糖写法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h2>当前计数{{counter}}</h2> <button @click="increment">+</button> </div> <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> new Vue({ el:"#app", data:{ counter:0, }, methods: { increment:function(){ this.counter++ }, }, }) </script> </body> </html>使用v-bind动态绑定html中的属性。
：src='img’是v-bind:src='img’的语法糖写法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <img v-bind:src="img" alt=""> </div> <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> new Vue({ el:"#app", data:{ img:"https://img.lovebuy99.com/uploads/200905/15-200Z5194GM38.jpg" }, methods: { increment:function(){ this.counter++ }, }, }) </script> </body> </html>绑定href：url为data中的数据
<a :href="url"></a>使用data数据域定义的Boolean1和Boolean2动态改变是否包含对应的class。
绑定方式分为数组语法和对象语法。如果过于复杂，可以使用methods或者computed；
可以使用methods。
计算属性和methods的比较：
methods中的方法在每次调用的时候都会重新执行，而计算属性会将计算结果进行缓存，在一个页面中可以多次复用。
<div id="app"> <!-- 事件调用的方法没有参数 --> <!-- 括号存在与否没有影响 --> <button @click="btn1click()">按钮1</button> <button @click="btn1click">按钮2</button> <!-- 事件定义时，写函数时加了括号，方法本身是需要参数的而没有传参 --> <!-- 结果会产生一个undefined类型的对象 --> <button @click="btn2click(abc)">按钮3</button> <button @click="btn2click()">按钮4</button> <!-- 如果省略了括号会产生一个事件对象 --> <button @click="btn2click">按钮4</button> <!-- 在调用方法时，如果需要event对象，同时也需要其它对象， 可以使用$event来获取event对象。 --> <button @click="btn3click(变量,$event)">按钮5</button> </div>登陆切换小案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户名"> </span> <span v-else> <label for="email">用户邮箱</label> <input type="text" id="email" placeholder="用户邮箱"> </span> <button @click="change">切换</button> </div> <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> new Vue({ el:"#app", data:{ isUser:true }, methods: { change(){ this.isUser=!this.isUser }, }, }) </script> </body> </html>当两者后面的值都为true时，二者并没有区别。但当二者后面的值为false时，v-if修饰的元素不存在于dom中，v-show的条件为false时，只是给元素添加一个行内样式，diaplay:none
<body> <div id="app"> <input type="text" v-model='mes'> <p>{{mes}}</p> </div> <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> new Vue({ el:"#app", data:{ mes:"v-model的使用" }, }) </script> </body>使用v-model可以在改变input中的内容时，而且可以同时改变v-model绑定的数据在data中的值。
实现方法可以使用：value=“变量”+函数（value）的方式来实现。
v-model的修饰符
lazylazy 修饰符可以在让数据失去焦点或回车才更行numbernumber可以使输入框中的内容自动转化为数字trimtrim修饰符可以过滤内容两边的空格全局组件的注册是在Vue的实例外注册的
<body> <div id="app"> <cpn></cpn> </div> <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> // 创建组件的构造器对象 const cpnC=Vue.extend({ template:` <h2> Vue.Js的组件化操作 </h2> ` }) //注册组件(使用这中方法注册的组件是全局组件) //cpn为组件名，cpnC为组件构造器对象。 Vue.component('cpn',cpnC) new Vue({ el:"#app", data:{ mes:"v-model的使用" }, }) </script> </body>通过Vue实例进行注册，只有在Vue实例管理范围内有效。
<script> // 创建组件的构造器对象 const cpnC=Vue.extend({ template:` <h2> Vue.Js的组件化操作 </h2> ` }) //注册组件(使用这中方法注册的组件是全局组件) // Vue.component('cpn',cpnC) new Vue({ el:"#app", data:{ mes:"v-model的使用" }, components:{ cpn:cpnC } }) </script>父组件和子组件的使用和注册
注意：组件应当是一个div容器。
<body> <div id="app"> <cpn2></cpn2> </div> <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> const cpnC1=Vue.extend({ template:` <h2> Vue.Js的组件化操作 </h2> ` }) const cpnC2=Vue.extend({ template:` <div> <h2> 父组件与子组件 </h2> <cpn1></cpn1> </div> ` , components:{ cpn1:cpnC1 } }) new Vue({ el:"#app", data:{ mes:"v-model的使用" }, components:{ cpn2:cpnC2 } }) </script>注册组件的语法糖写法
Vue.component('cpn',{ template:` <h2> Vue.Js的组件化操作 </h2> ` })在组件中添加动态数据data，data必须是函数。是为了保障每个模板都有自己独立的数据，不受其组件的影响。
const cpnC=Vue.extend({ template:"#tem", data(){ return { mes:"组件化data" } } })子传父
<body> <div id="app"> <my-cpn @itemclick="cpnClick"></my-cpn> <h2>{{type}}</h2> </div> <template id="tem"> <div> <div> <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button> </div> </div> </template> <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> const cpnC=Vue.extend({ template:"#tem", data(){ return{ categories:[ {id:'aaa',name:'热门推荐'}, {id:'bbb',name:'搜集数码'}, {id:'ccc',name:'家用家电'}, {id:'ddd',name:'电脑办公'}, ] } }, props:{ }, methods: { btnClick(item){ this.$emit('itemclick',item) }, }, }) Vue.component('my-cpn',cpnC) new Vue({ el:"#app", data:{ message:'Vue.Js', type:'', }, methods:{ cpnClick(item){ this.type=item.name }, } }) </script> </body>父访问子-children-refs
children的使用
在父组件使用this.$children可以获得一个包含所有子组件对象的数组。
refs的使用
在子组件中加上ref=‘key’,在父组件使用的时候使用$refs.key可以获取使用key标注的组件对象。
子访问父 -parent-root
在子组件中使用this.$parent可以获得父组件对象
在子组件中使用this.$root可以获得根组件对象(可以访问Vue实例)
基本使用
<div id="app"> <cpn>html标签</cpn> <cpn></cpn> </div> <template id="tem"> <div> <h2> Vue.Js的组件化操作 </h2> <h2>{{mes}}</h2> <slot></slot>//可以在中间加入默认内容.在使用时不加内容就使用默认内容 </div> </template>具名插槽
<div id="app"> <cpn><span slot="middel">中间</span></cpn>//通过name和slot联系起来 </div> <template id="tem"> <div> <slot name="left"><span>left</span></slot> <slot name="middel"><span>middel</span></slot> <slot name="right"><span>right</span></slot> </div> </template>作用域插槽
<div id="app"> <cpn></cpn> <cpn> <template scope="slot"> <span v-for="item in slot.data">{{item}}-</span> </template> </cpn> </div> <template id="tem"> <div> <slot :data="languages"> <div> <ul> <li v-for="item in languages">{{item}}</li> </ul> </div> </slot> </div> </template> const cpnC=Vue.extend({ template:"#tem", data(){ return { languages:['Java','python','javascript','c++'] } } })