-
{{number}} 这种语法我们称之为“插值表达式”
查看全部 -
挂载点：
<div id="root">{{msg}}</div>
这个div标签就是底下Vue实例的挂载点
也就是el属性对应id的dom结构
模板：
挂载点内部的内容，可以放在Vue实例中的template里面
查看全部 -
new Vue({ el:"#root"; data: { msg: "hello world" } }) el element 通过el进行绑定 通过vue，不会有任何dom的操作，直接对数据进行操作查看全部 -
vuejs的导入最好放在head部分
查看全部 -
v-for 用来控制一组数据，通过这组数据来循环显示dom结构
<li v-for="(item, index) of list" :key="index">{{item}}</li>
查看全部 -
v-if会把dom删除掉,控制dom的存在与否
v-show会更改css属性，display=none，控制dom的显示与否
查看全部 -
简单todolist
查看全部 -
watch 侦听器，侦听某一个数据的变化，发生变化时，会执行函数实现相应的逻辑
查看全部 -
computed 计算属性，它的性能是比较高的，只有当他依赖的属性发生变化时，它的值才会发生改变，否则使用上一次的缓存值
查看全部 -
v-bind: 属性绑定，可简写为": "（之前讲过v-on：可简写成@，这是第二个指令简写）
<div v-bind:title="content"></div>
查看全部 -
当在export default {}中写一个data ，data变成了一个函数
查看全部 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="div"> <input type="text" v-model="message"></br> <input type="button" value="提交" @click="test"> {{message}} <ul> <li v-for="(item,index) of list">{{item}}</li> </ul> </div> <script> var app = new Vue({ el: "#div", data: { list: [], message: "" }, methods: { test: function () { this.list.push(this.message); this.message =""; } } }) </script> </body> </html>查看全部 -
应用组件
<ul> <todo-item v-for="(item, index) of list" :key="index" :content="item"> </todo-item>
定义组件
Vue.component('todo-item', { props: ['content'], template: '<li>{{content}}</li>' });查看全部 -
计算属性与侦听器 computed: { fullName: function () { return this.firstName + ' ' + this.lastName; } }, watch: { fullName: function() { this.count++ } }查看全部 -
计算属性
computed:{
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
}
查看全部
举报
0/150
提交
取消