-
v-module：数据双向绑定
:value：数据单向绑定
查看全部 -
v-show ：仅将该元素隐藏，不删除元素，性能高一些
v-if ：会销毁或创建DOM中元素
v-for ：循环
查看全部 -
computed：计算属性，一个属性是根据其他属性值计算出来的结果，仅当需要计算的参数发生变化是才会重新进行计算，否则取的是缓存中的值；
watch：侦听器，监听某一个数据的变化
查看全部 -
计算，属性，效率高。它是有其他属性计算，而来。如果依赖的属性没有发生变化。他会从缓存中读取，知。只有当他依赖的属性，当中的任一个，发生变化。他才会重新计算。查看全部
-
对于根实例来说，如果没有模板，他会把挂载点的所有内容作为模板
查看全部 -
挂载点 v-text ,v-content 插入表达式 {{ }} 挂载点，模板，事件，查看全部
-
每一个组件都是一个Vue的组件实例，实例的模板里使用一个小的组件。
每一个组件也可以写methods，data。因此每一个组件都是一个Vue的实例。
如果不定义模板，就会根据挂载点下面的DOM标签标签全部内容当做模板。
查看全部 -
通过this调用vue实例的data属性
list.push往列表里添加值
如下this.inputValue=''让提交后input框清空
查看全部 -
1、v-if和v-show区别：展示的效果一样，但是 v-if（控制dom的存在与否）是通过删除/增加代码的方式来隐藏/显示内容；v-show（控制dom的显示与否）是通过改变css代码来显示/隐藏元素内容。
2、在使用上的建议：页面内如果需要频繁的显示隐藏dom，就是用v-show，这样不会删除掉代码，如果只需显示隐藏一次就使用v-if 。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script> </head> <body> <div id="root"> <div v-if="show">hello world</div> <!-- v-if可以换成v-show --> <button @click="myClick">toggle</button> <!-- v-on的简写@ --> </div> <script> new Vue({ el:"#root", data:{ show:true }, methods:{ myClick:function(){ this.show=!this.show;<!-- 反复点击按钮可以让show反复显示/隐藏 --> } } }) </script> </body> </html>3、v-for做页面上循环内容的展示 :key可以提升每一项渲染的性能，但是要求:key要求:key值也就是每一项循环的内容都不同。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script> </head> <body> <div id="root"> <ul> <!-- <li v-for="item of list" :key="item">{{item}}</li> 这句循环list内容，把每一次循环显示在item里--> <li v-for="(item,index) of list" :key="index">{{item}}</li><!-- 这句优化上面的:key因为key值不能相同，每一次循环列表得到item和数组下标index，将key值换成index值就不会有相同 --> </ul> </div> <script> new Vue({ el:"#root", data:{ list:[1,2,3] } }) </script> </body> </html>查看全部 -
计算属性computed 一个属性通过其他属性计算得来（例：fullName通过firstName+lastName得来）
侦听器watch 进行数据侦听，然后进行某些操作（例：侦听fullName，进行count++计算fullName长度）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./vue.js"></script> </head> <body> <div id="root"> 姓：<input v-model="firstName"/> 名：<input v-model="lastName"/> <div>{{fullname}}</div> <div>{{count}}</div> </div> <script> new Vue({ el:"#root", data:{ firstName:'', lastName:'', count:0 }, computed:{ fullName:function(){ return this.firstName+""+lastName }， wacth:{ fullName:function(){ this.count++ } } }) </script> </body> </html>查看全部 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./vue.js"></script> </head> <body> <div id="root"> <div v-bind:tittle="tittle">hello world</div><!-- v-bind:tittle可以写为：tittle,"tittle"与data里的tittle绑定 --> <input v-model="content"/> <div>{{content}}</div> </div> <script> new Vue({ el:"#root", data:{ tittle:"this is hello world", content:"this is content" } }) </script> </body> </html>v-bind:tittle="tittle" 单向属性绑定，与data里的tittle绑定，v-bind:简写为 ：
v-model:为双向数据绑定，div中某一个标签的值（例：input标签里的内容）发生变化后，可以改变vue实例中data属性相应的对象值；vue实例中的属性对象值发生改变，div标签值也会发生改变。
查看全部 -
data：数据
template：模板
v-text: 会转译
v-html: 不会转译
v-on: 事件绑定v-on:的简写为@符号
<div v-on:click myClick>{{content}}</div>
//myClick函数内容写在 vue里的method里
<script>
new Vue({
el:"#",里面绑定一个id
data:{
content:"hello"
},
method:{
myClick:function(){
this.content="world"
}
}
}
})
</script>
查看全部 -
组件里面的data的简化写法
查看全部 -
组件里面的data 是个对象
data： function ( ) {
return { }
}
查看全部 -
vuejs 入门：
用script 标签在页面的<head>里引入vue.js: <script src="./vue.js"></script>
页面中实例化一个vue的类；<script>new vue({el:"#root",data:{msg:'hello word!'}})</script>
<div id="root"></div>
查看全部
举报