一 VUE模板

1、简单模板的例子

<div id="app-2">
  <input :disabled="tag" :value="msg"/>
  <span>1msg{{msg}}</span>
</div>
<script>
new Vue({
  el: '#app-2',
  data: {
    seen:true,
	msg:'123',
	tag:false  // 如果这个属性没有被定义，标签读取到的是null,undefined,或者被定义为false的时候，这个属性不会显示（H5规范布尔值显示可以缩写了）
  },
  created:function(){console.log(123)}
})

显示效果如下

标签内容用{{}}来替换，属性用:绑定，绑定的全写法是

v-bind:disabled="tag"，缩写是:disabled="tag"

如果你要插入一段html，希望他被解析而不是被当做字符串，使用v-html

<div id="app-2">
  <p><span v-html="span"></span></p>
</div>
<script>
new Vue({
  el: '#app-2',
  data: {
    span:'<span style="color:red">123</span>'
  }
})
</script>

效果如下

和eval()一样，是双刃剑比较危险，因为权限大。

vue模板支持js表达式

写一个如下例子：

<div id="app-2">
  <div>属性加上1：{{msg+1}}</div>
  <div>值倒序：{{msg.split('').reverse().join('') }}</div>
  <div>值三元操作符：{{msg=='123'?1:2}}</div>
</div>
<script>
new Vue({
  el: '#app-2',
  data: {
	msg:'123'
  }
})
</script>

效果如下

个人测了一下，不支持自定义函数（非js原生的自带的），不支持console.log这些函数。

官方定义为自定义函数和console.log这些都是语句不属于表达式的范畴，认为.split().reserve和加减乘除这些就是表达式的范畴，split这些函数可能因为调用方式是主体调用？（string.function()这种，而不是function(string)）。

那理论上是不是在string类里面写原型函数就可以调了？后面有空在测吧。

指令

指令是v-开头的属性，和模板内容一样，如果实例的值变化，指令也会相应变化，从而影响页面展示。

v-if="seen" 根据vue实例中seen的值来判断是否显示

v-bind:href="url" 将实例中url的值赋值给href，缩写是:href="url"

v-on:click="boom" 将实例中名为boom的函数赋值给click的监听事件，缩写是@click="boom"

v-for="item in items" 相当于jstl里的var和items

修饰符

<form v-on:submit.prevent="onSubmit">...</form>

如上是阻止提交

猜你喜欢