很久没更新博客了,最近看了很多零零碎碎的知识,记在本子上,今天感觉有一些量了,整理在这里。这些基本上都是我在看完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()转。但总觉得怪怪的,有待解决。