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
})