-
1.计算属性(computed:)：一个属性通过其他属性计算而来
好处：
（只有它依赖的数据发生变化的时候，它才会重新计算；如果依赖的属性没有发生变化，它会利用以前计算结果的缓存来在页面上做显示）
2.侦听器(watch)：指的是监听某一个数字发生了变化，然后就在监听器里面做业务逻辑，
侦听器watch：监测某一个数据或计算属性发生了变化，一旦这个数据发生了变化，就在该侦听器内写入业务逻辑
注：watch不仅可以监听vue实例的data内属性，而且可以监听计算computed下计算属性的变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>计算属性与侦听器</title> <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 + ' ' + this.lastName } }, watch: { firstName: function() { this.count ++} } }); </script> </body> </html>查看全部 -
Vue中的属性绑定和双向数据绑定
v-bind：属性绑定。缩写为冒号 : (:title)
v-model：双向数据绑定，随着数据的修改与之对应的也会修改。
课程代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>属性绑定和双向数据绑定</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <div :title="title">hello world</div> <input v-model="content" /> <div>{{ content }}</div> </div> <script>new Vue({ el: "#root", data: { title: "this is hello world", content: "this is content" } }); </script> </body> </html>查看全部 -
{{number}}：插值表达式，也就是把number的值插入到h1之中；
v-text="number"：h1的内容由number这个变量决定，v-text是Vue中的一个指令，这个指令里面的东西跟着的是一个变量，它告诉h1显示的内容就是"number"这个变量；
v-html="c ontent"：v-html与v-text的区别是，v-html不会转义，而v-text会转译；
v-on:click="handleClick"：通过v-on给元素绑定一个Click事件，事件触发方法。
v-on:click的简写方法：@click
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./vue.js"></script> <title>Vue入门</title> </head> <body> <div id="root"> <div @click="handleClick">{{content}}</div> </div> <script> new Vue({ el: "#root", data: { content: "hello" }, methods: { handleClick: function() { this.content = "world" } } }) </script> </body> </html>查看全部 -
<!-- 挂载点，模版，实例之间的关系 ->
挂载点：el属性(#root)对应后面id(id="root")所对应的节点；
模版： 指的是挂载点内部，也可以写在实例里面template属性里面;
实例：Vue会结合模版和数据生成最终要展示的内容，然后把放在挂载点之中。
查看全部 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入门</title> <script src="./vue.js"></script> </head> <body> <div id="root">{{msg}}</div> <script> new Vue({ el: "#root", data: { msg: "Hello World" } }) </script> </body> </html>上课代码笔记
查看全部 -
属性绑定v-bind：
双向绑定v-model
查看全部 -
v-on v-model v-bind :属性 computed 同data级别 添加属性 是由其他值改变计算而来，有缓存 watch查看全部
-
v-if:具有选择性的指令，可以是页面显示隐藏。
v-show:加的隐藏
v-for：循环遍历 注意添加key的属性它的值的内容必须是完全不同的
查看全部 -
v-bind：属性绑定。可以缩写:
v-model:双向数据绑定，随着数据的修改与之对应的也会修改
查看全部 -
vue可以通过script标签引入，
具有挂载点，模板，实例。
挂载点：div内的内容和实例里el:值绑定。
模板：可以在挂载点写，也可以在实例里面写。随意任何标签（注意：渲染出data中的数据）。
{{}}渲染叫做插值表达式
v-text指令它的值绑定和data中的属性名1一样就可以得到名1的值，转义过的字符。
v-html：直接是标签内的内容，不会转义，
v-on：事件=“方法名”，方法定义在methods这个对象中。可以在方法中修改里面的内容，对应的标签中渲染的内容也会改变
查看全部 -
以前是数据现在是对象。
查看全部 -
<style scoped>
</style>
scoped 让样式只在当前组件起作用
查看全部 -
父组件向子组件传值，通过属性的方式传递，子组件中通过props接收
在子组件中通过$emit触发父组件的自定义事件（this.$emit('delete',this.index)），子组件中通过监听事件的触发（@delete="handleDelete"）进行相应的业务逻辑处理
查看全部 -
每个vue的组件都是一个vue的实例
查看全部 -
组件传值：props:[ ]
查看全部
举报