Java炒饭之Vue的基本语法
目录:
一、插值
二、指令
三、过滤器
四、计算属性及监听属性
一、插值
1.1 简单的文本
{{msg}}
1.2 html
使用v-html指令用于输出html代码
html的文本转义
1.3 Vue的属性
HTML属性中的值应使用v-bind指令
第一个msg相当于是 字符串
第二个和第三个是变量
1.4 Vue中的Js支持
Vue提供了完全的JavaScript表达式支持
{{str}}<br />
{{str.substr(0,6)}}<br />
{{num+1}}<br />
{{flag?'ok':'false'}}<br />
<span :id="'stu'+id">这是第九十九个学生</span>
对应变量
str:‘hello vue js’,
num:9,
flag:true,
id:99
运行结果:
二、指令
什么是指令? 指的是带有**“v-”前缀**的特殊属性
1.1一些核心指令
(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model
v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
<span v-if="score>100">不存在</span><br />
<span v-show="score>100">不存在</span>
<div v-for="n in arr">
{{n}} <br>
</div>
<div v-for="n in likes">
{{n.id}}---{{n.name}} <br>
</div>
<button v-on-click="dos">点点<br />
<button @click="dos">点点<br />
<input v-model="envname"/><br />
<button v-on="dos">变化按钮</button><br />
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
score: 88,
arr: ['篮球', '足球', '洗脚'],
likes: [{
id: 1,
name: '洗jio'
}, {
id: 2,
name: '洗头'
}, {
id: 2,
name: 'spa'
}],
envname: 'click',
}
},
methods:{
dos(){
alert('来个spa')
}
}
})
</script>
</body>
执行结果:
面试题中经常会出现
v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style=“display:none”,不是真的不存在,而是被css样式隐藏了
v-for：类似JS的遍历，遍历数组: v-for=“item in items”, items是数组，item为数组中的数组元素
遍历对象: v-for=“(value,key,index) in stu”, value属性值,key属性名，index下标
v-bind
v-on: 动态参数是指可以在v-on：[定义一个属性]，然后在data里面进行传值就可以实现动态参数
将输入框的click改成dblclick之后,鼠标要双击才会弹框,之前只需要单击
v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
v-for/v-model一起绑定[多选]复选框和单选框
总得来说指令就是记得要加v- 和:
三、过滤器
1.1基本过滤器
{{str}}<br/>
{{str|filterA}}<br/>
<!-- {{str|filterA|filterB}}<br/>
{{str|filterC(1,4)}}<br/> -->
</div>
<script type="text/javascript">
new Vue({
el: '#app',
filters: {
filterA:function(v){
return v.substring(0,3);
},
filterB:function(v){
return v.substring(1,2);
},
filterC:function(v,start,end){
return v.substring(start,end);
}
},
data() {
return {
str:'nihao hhhhh'
}
}
})
</script>
</body>
运行结果:
可以看到将字符串进行过滤了
1.2过滤器串联
可以看到输出的字符串更少了
1.3过滤器传参
{{str}}<br/>
{{str|filterA}}<br/>
{{str|filterA|filterB}}<br/>
{{str|filterC(1,4)}}<br/>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
filters: {
filterA:function(v){
return v.substring(0,3);
},
filterB:function(v){
return v.substring(1,2);
},
filterC:function(v,start,end){
return v.substring(start,end);
}
},
data() {
return {
str:'nihao hhhhh'
}
}
})
</script>
</body>
运行结果:
可以根据自己需求,传参
也可以加入现成的js导入到Vue中
date.js ,导入date.js之后
{{str}}<br />
{{str|filterA}}<br />
{{str|filterA|filterB}}<br />
{{str|filterC(1,4)}}<br />
{{curtime}}<br />
{{curtime|format}<br/>
</div>
<script type="text/javascript">
Vue.filter('format',function(v){
return fmtDate(v,'yyyy-MM-dd hh:mm:ss')
})
new Vue({
el: '#app',
filters: {
filterA:function(v){
return v.substring(0,3);
},
filterB:function(v){
return v.substring(1,2);
},
filterC:function(v,start,end){
return v.substring(start,end);
}
},
data() {
return {
str:'nihao hhhhh',
curtime:new Date()
}
}
})
</script>
</body>
运行结果:
可以看到通过date.js的方法后变成我们熟悉看的格式了
四、监听属性及计算属性
1.监听属性:一个属性发生变化,和它相关联的属性都会发生变化
km:
运行结果:
当m变化时km也会跟着变化,反之亦然,注意代码中的
m:function(v){
//此时的v指的是被监听的属性
this.km=parseInt(v)/1000
},
v指的是被监听的属性
1.2计算属性:单方面的影响
km:
<!-- 单价,数量,小计 -->
<table>
<tr>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td><input v-model="sg" /></td>
<td><input v-model="n" /></td>
<td>{{xiaoji}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
m:1000,
km:1,
sg:100,
n:1
}
},
watch:{
m:function(v){
//此时的v指的是被监听的属性
this.km=parseInt(v)/1000
},
km:function(v){
//此时的v指的是被监听的属性
this.m=parseInt(v)*1000
}
},
computed: {
xiaoji() {
return this.sg*this.n;
}
},
})
</script>
</body>
运行结果:
单价改变之后小计会跟着改变,数量改变之后,小计也会
计算属性和监听属性的区别
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
与watch之间的区别：
刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象
那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?
上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
与watch之间的区别：
刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象
那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?
上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
