Vue.js 实践笔记

很久没更新博客了，最近看了很多零零碎碎的知识，记在本子上，今天感觉有一些量了，整理在这里。这些基本上都是我在看完vue官网教程之后实际写demo的时候遇到的一些问题，只看教程没能很好的理解那些概念，果然还是实际写起来更有用，现在看来其实都是些没什么技术含量的小问题，但是当时摸索的时候都是一个个折腾过来的，谨在这里记下来提醒自己吧。

1.vue.js和vue.min.js的区别，开发版默认可调式，可以用vue devtools。开发板有vue相关的警告和错误提示。实际使用的时候还发现，开发板的要求更加严格一些，有些问题在开发板会报错导致无法运行，压缩版本却能够正常使用。当然还是以开发版的规范的方式为主。

2.双大括号{{ }} 做文本插值，三大括号{{{ }}}做HTML插值。并且他俩可以使用全局配置来变更：

// 修改文本插值的定界符。
Vue.config.delimiters = ['${', '}']
// 修改原生 HTML 插值的定界符。【2.0废除】
Vue.config.unsafeDelimiters = ['{!!', '!!}']
//2.0使用v-html来进行html插值
<div v-html="rawHtml"></div>

另外，双大括号{{ }}的插值可以用在HTML标签的属性内（如id=”{{ id }}”）,但在vue.js的指令和特殊特性内不能用，比如v-bind和v-on:click这种就不用大括号，直接写即可。
注意：vue2.0废除了三大括号的html插值写法，而使用了v-html来代替。

3.每个 Vue 实例都会代理其 data 对象里所有的属性:

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3

注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。这种情况要使用$set

4.在Vue对象的methods中定义的方法要访问Vue对象的data中的数据时，直接this.dataName即可。原理就是上一条。this就是Vue对象，也就是Vue.data

5.Vue对象的HTML模板中，不可以用jquery的$(“#id”).click()这种方式来绑定点击事件，要用它自己的方法。

6.v-bind:用于绑定属性，如class，style还有Vue的props传入数据的自定义属性等等，缩写是 : 。v-on:用于绑定事件，click等。

7.Vue对象的HTML模板中，不能有script标签包裹js。这个问题在压缩版中不提示，似乎能够正常使用，但是在开发板的vue.js文件中会报错以至于无法执行。

8.用大括号{{ msg }}的时候，插入前可能会有一瞬间出现 msg变量本身，避免这种情况有两个办法: 1.在元素上加上v-cloak来隐藏未编译的标签，但注意要在css中加上[v-cloak]{display:none;}这句才有效。2.在标签中使用v-text=“msg”来替代{{ msg }}。
上述两个方法都能够解决该问题，但是实际上他们有微小的差别：当包含该{{ msg }}的div元素存在背景色的时候会很明显。方法1在msg渲染出来之前，div整个不显示（不存在东西）。而方法2在渲染之前div是显示的只是其中没有内容（有一个div色块）。

实际上，大多数数据跟v-for v-if v-show等判断条件相关联，所以当模板渲染的时候数据就已经存在了，不会出现这种闪烁的问题。只有“无论是否有数据都先显示”的标签才会遇到上述问题。

9.由于我们的项目是多页面的web站点，所以不适合使用vue做单页面应用的方式。在使用vue的组件特性进行代码复用的时候，就使用如下方式：
1）将所有的vue组件注册放在一个单独的vue.component.js文件中，注册的时候注意加上props来给组件传递数据。这里要注意组件中的date和el一定要用函数返回的形式来写。
2）这样就有一个对应给所有组件的vue.component.css文件。
3）在使用的时候直接用注册好的自定义标签，使用v-bind: props 来传递数据给组件：
注册组件：

Vue.component('child', {
      // 声明 props
      props: ['poNum','color','qty','val'],
      // prop 可以用在模板内
      // 可以用 `this.msg` 设置
      template: '<div style="background-color:gray"><p>{{ poNum }}</p><p>{{ color }}</p><p>{{ qty }}</p><input type="text" v-model="val"></div>',
})

Vue实例：

new Vue({
  el: '#example',
  data:{
      child_example_1:{
          poNum:'001',
          color:'red',
          qty:'100',
          val:'Creabine'
      },
      child_example_2:{
          poNum:'002',
          color:'green',
          qty:'200',
          val:''
      }
  }

})

HTML：

<div id="example">
    <span>child example 无数据</span>
    //不写props
    <child></child>
    <span>child example 静态数据</span>
    //写props但是不用v-bind绑定，因为是静态的，写死的
    <child po-num="123456789" color="red" qty="100" val="hehe?"></child>
    <span>child example 动态数据1   </span>
    //变量要使用v-bind来绑定表示他是变量，不用v-bind的话，会被当做字符串 
    <child :po-num="child_example_1.poNum" :color="child_example_1.color" :qty="child_example_1.qty" :val="child_example_1.val"></child>
    <span>child example 动态数据2</span>
    //变量要使用v-bind来绑定表示他是变量，不用v-bind的话，会被当做字符串 
    <child :po-num="child_example_2.poNum" :color="child_example_2.color" :qty="child_example_2.qty" :val="child_example_2.val"></child>        
</div>

10在Chrome Store里边可以加一个vue devtools的插件来方便vue的调试。装了之后在F12中会识别该页面是否使用vue，如果使用了，在Element，Console，Source这一排的右边会有一个Vue标签，里边可以调试Vue，看到自定义标签和相对应的数据，很清晰。
注意：开发板的vue.js默认可调式，压缩版默认不可以。另外还可以通过全局设置：
Vue.config.devtools = true 来设置可调试。

11.Vue.resource。一开始配合Vue使用的是jquery的ajax，但是如果该页面能够用vue搞定，就完全不需要引入相比之下体积很大的jquery（后来知道了jquery的ajax也可以单独拿出来引入），这时候我们直接选择用vue-resource来跟后台进行ajax通信。
这里有很清晰的中文文档，基本上看一下就明白了。但是我在实际使用的过程中发现一个问题;
ajax成功之后返回的response对象有一个json（）方法，可以将response对象中的bodyText字符串转为json对象来使用。但是我这边返回的bodyText是undefined。没搞清楚为什么会这样，最后只能自己手动使用JSON.parse（）转。但总觉得怪怪的，有待解决。