vue 学习 渲染、v-指令
vue渲染
在组件中data是一个方法里面的值要是一个对象return出去
export default { name: "HelloWorld", data() { return { msg: "vue 学习旅程" }; } };
如果是new的事例 data就是一个对象
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
组件例子:
1.使用 {{}} 文本插值符
f1 <template> 2 <div class="hello"> 3 <div>{{msg}}</div> 4 </div> 5 </template> 6 7 <script> 8 export default { 9 name: "HelloWorld", 10 data() { 11 return { 12 msg: "vue 学习旅程" 13 }; 14 } 15 }; 16 </script>
效果:
// v-text v-html 区别
<template>
<div class="hello">
<span v-text="word1">11</span>
<span v-html="word2">11</span>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
word1: " <div>安稳1</div> ",
word2: "<div>安稳2</div> "
};
}
};
</script>
效果:
总结: v-html解析html 两个都会覆盖标签内容 {{}}不会覆盖 {{}}和v-text都不解析html内容
vue指令
2.v-bind
改指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。 v-bind可以简写 :
<template>
<div class="hello">
<span v-bind:title="msg">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: "vue 学习旅程"
};
}
};
</script>
鼠标悬浮效果:
3.v-if 指令
绑定一个布尔值 true是显示 false隐藏
<template>
<div class="hello">
<span v-if="active">{{msg}}</span>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: "vue 学习旅程",
active: true
};
}
};
</script>
4.v-for
注意点:
1.需要加key值 -通过key值来提升渲染的效率默认用 “就地复用” 策略
2.v-for
v-for="(item,index) in items" 第一参数item是每一项的数组元素 第二参数index是当前项的索引 (和angularjs 相反 )
也可以用of代替in作为分隔符,也是最接近javascript迭代器的语法。 这时候每一项的意义有一些不一样
v-for="(item,key,index) of items" 第一参数item元素 第二参数key为键名 第三个参数index 为索引<template> <div class="hello">
<span v-for="(item,index) in msg" :key="index">{{item.a}}</span>
// <span v-for="item in msg">{{item.a}}</span> 注意这种写法不会影响效果，但是编辑器语法会报错出现红色波浪线 记得加上key值
</div>
</template>
<script> export default { name: "HelloWorld", data() { return { msg: [{ a: 1 }, { a: 2 }, { a: 3 }] }; } }; </script>
效果:
5.v-on
事件绑定可以cy()也可以cy直接绑定 加括号传参数 v-on可以简写@
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
以上我们直接写死的点击事件 也可以使用动态参数作为事件名绑定处理函数
<div id="app-5"> <button v-on:[eventname]="reverseMessage">动态事件名</button> </div>
var app5 = new Vue({
el: '#app-5',
data: {
eventname:'focus'
},
methods: {
reverseMessage: function () {
。。。。。。
}
}
})
当 值为'focus' v-on:[enentname]等价 v-on:focus
包括(v-bind 和 v-on 的动态参数 )
动态事件参数注意点:
1.非字符串类型都会触发警告
2.语法约束空格引号无效并且回避大小写
3.计算属性复杂的表达式也会无效
例:
<a v-bind:['foo' + bar]="value"> ... </a> //触发警告
<a v-bind:[someAttr]="value"> ... </a> //流浪器特效强制转小写
这个是官网的事例:我看到了一个reverse()的方法 以前没用过所以做一下记录~
var vm = new Vue({ date:{ message="abcdefg" } )}
//split(' ')分裂，也就是把一个数据拆分 message.split(' ') == [ "a", "b", "c", "d", "e", "f", "g"]
//reverse( )翻转，把数据反过来 !只对数组有效
message.split(' ').reverse() == ['g', "f", "e".......]
//join(' ')重组，把数组合成一个字符串
//把数据反过来重组
message.split(' ').reverse( ).join(' ')
6.v-model
<template>
<div class="hello">
<input type="text" v-model="msg" />
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: "vue 双向绑定"
};
}
};
</script>
v-model的修饰符,一起记录一下
(1) .lazy 会转变为在 change 事件中同步 ， 也就是在失去焦点 或者 按下回车键时才更新**
<input type="text" v-model.lazy="msg" />
(2) .trim 去头尾空格
<input type="text" v-model.trim="msg" />
(3).number 将输入的值转化为Number类型 ，否则虽然你输入的是数字 但它的类型其实是String，在数字输入框中比较有用
<input type="number" v-model.number="msg" />
