Vuejs使用

关于class与style绑定的问题

说明：对于需要连字符的字段需要加上引号，不然vue无法识别，

例如：

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

此处的text-danger是vuejs需要识别的变量，所以必须加上引号，不然不起作用（至于前面的active不加引号是因为没有连字符，vuejs识别，所以可以）

组件中的字面量语法与动态语法

说明：父组件给子组件传值的时候如果是字面量，子组件接收到的都是字符串，没有其他形式；但是如果用动态语法传递变量则是javascript对象。

例如：

<!-- 传递了一个字符串"1" -->
<comp some-prop="1"></comp>
<!-- 传递实际的数字 -->
<comp :some-prop="1"></comp>

第一行传给子组件的就是字符串，而第二行则传给子组件的是数字

vue-devtools使用

下载vue-devtools插件

地址栏输入

chrome://extensions/

进入扩展中程序设置，勾上允许访问文件网址

在调用vue的页面在引入vue.js之后js设置

Vue.config.devtools = true;

异步执行DOM更新

说明：Vue 是异步执行 DOM 更新的，当更改数据后并不会立即更新dom，而是先进入队列，而后更新dom，所以想要数据更新后立即操作与dom相关的事情，可以用nextTick函数
例如：当你设置

vm.someData = 'new value'

，该组件不会立即重新渲染

Vue.nextTick(function () {
//do something
});
vm.$nextTick(function () {
//do something
})