Vue基础学习之模板语法

首先是关于Object.freeze() 和 v-once这两个都是让HTML中显示组件的属性值不与组件关联。

v-once只针一部分内容，而Object.freeze()这是是针对整个组件。

      var vm=new Vue({
	     el:"#example",
             data:{
		message:"hello world!",
	        newfruit:fruit
	     },
	    methods:{
	        addElement:function(){
	         this.newfruit.push({"id":"1001","name":"橘子","price":"2.0"});
		 console.log(fruit)
	       },
	    },
      })
      
     Object.freeze(vm)//添加后改变vm组件里的值不影响HTML里的内容

原始HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用

v-html:

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

这个 span 的内容将会被替换成为 property 值 rawHtml，直接作为 HTML——会忽略解析 property 值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

当我们需要动态改变标签的属性值时：

<div v-bind:id="dynamicId"></div>

对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

<button v-bind:disabled="isButtonDisabled">Button</button>

使用js表达式

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributename]="url"> ... </a>

 []中括号内的内容可以通过组件的属性值改变（[]内的内容要小写，试了好多次只有小写才对）。

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

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