新公司需要用vue开发,花点时间学习一下,顺手记点笔记,从基础开始。
1 、语法
插值
{{ data}} 将数据渲染进dom系统
属性绑定
v-bind:title="data" ---- 绑定dom 属性
:title="data" 简化语法
条件与循环
<p v-if="seen">现在你看到我了</p>
<ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol>
区分 v-show
v-if 为false,节点不生成;切换成本高,适合条件较少改变。
v-show一定会生成节点,只是结果为false时候,设置display:false. 适合频繁切换。
事件绑定
<button v-on:click="reverseMessage">逆转消息</button>
简化:<button @click="reverseMessage">逆转消息</button>
表单输入和状态的双向绑定
<input v-model="message">
2、组件化应用
<div id="app-7"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> </div>
Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' } |
3、 vue实例和生命周期
1 、实例化参数data中属性会被挂到实例上,并保持联动。
2、实例化参数data中不包含的属性不是响应式的。
3、实例会暴露出一些属性和方法 ,以$为前缀。
var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // => true vm.$el === document.getElementById('example') // => true // $watch 是一个实例方法 vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 }) |
生命周期跟react还是很像的,哈哈 compile template into render function 说白了就是生成了react 的render函数,
所以两者相似性不言而喻了,具体后面再好好研究,先看基础