vue: data binding
1.文本
第一种“Mustache” 语法(双大括号)写法
第二种 用v-text的指今写法
第三种和第四是对es6写法的拓展写法,称模板字符串
<template> <div> <p>hello {{world}}</p> <p v-text="'hello ' + world"></p> <p>{{`hello ${world}`}}</p> <p v-text="`hello ${world}`"></p> <button @click="world='ziksang'">改变wrold值</button> </div> </template> <script> export default { data () { return { world : "world" } } } </script>
2. v-once
通过指令我们可以对文本值进行一次性赋值操作,只进行第一次的数据渲染,如果再次改变值,文本值也不会改变
应用场景 : 一般是用在组件树中传递时,导致组件数据一层一层传递时,变改了不需要改变的场景,用v-once可以避免在组件数中只需用一次性赋值操作
<template> <div class="test"> <p v-once>hello: {{test}}</p> <p v-text="'hello: ' + test"></p> <p>{{`company: ${company}`}}</p> <p v-text="`name:${name}`"></p> <button @click="test='change your world'">update</button> </div> </template> <script> export default { data() { return { test: "Nyan Shen,Welcome to Vue", name: "Nyan Shen", company: "isoftstone.com", position: "web programmer" }; } }; </script> <style> .test { color: hsl(207, 76%, 53%); } </style>
3. 纯html
我们在解析的不是文件而是一个html格式的时候放在v-text中或者{{}}就会被当作一个文本解析,所以我们此时要用v-html指令进行解析,在1.0中支持{{{}}}这种格式,为了防止xss功击,去除了这个功能
常用场景 : 当我们在跟前后台对接口数据时,后台会返回一个html格式,一般是后台操作界面编译的样式文本,此时我们就要用v-html来进行解析
<template> <div> <p v-html='html'></p> </div> </template> <script> export default { data () { return { html : `<span style='color : red;'>显示红色的字你就解析成功了</span>` } } } </script>
4. 属性
在vue中属性这个东西很关健,在组件与组件中数据传递时会很有用,但是对于属性的解析我们不能用{{}}“Mustache” 语法(双大括号)写法,我们同时还是要用指令去解析,那就是v-bind:*,同时我们可以简写用v-bind语法糖 :即可
如果我们先不考虑组件传递,我们就是考虑简单的给元素加属性
应用场景 在组件中传递时需要用,其它元素上的绑定属性都需要这个功能
<template> <div> <a :href='href'>href</a> <p :id='id'>id</p> <img :src="src" alt="图片"> <button :disabled = 'disabled'>按钮</button> </div> </template> <script> export default { data () { return { id : 2, href : 'http://www.baidu.com', src : 'https://cn.vuejs.org/images/logo.png', disabled : true } } } </script>