vue—模板语法

1、{{}}:插值表达式

<div id="app">
  <h1>{{msg}}</h1>
  <h1>{{num}}</h1>
  <h1>{{date}}</h1>
</div>

var vm = new Vue({
  // el模板选择器
  el: '#app',
  // data 数据中心：用来初始化数据---模型层
  data: {
    msg: '你好',
    num: 100,
    date: new Date()
  },
})

代码演示：

2、v-text文本渲染指令 特点：只能渲染纯文本，不能渲染html标签

<div id="app">
  <p v-text="uname"></p> 
</div>

var vm = new Vue({
  // el模板选择器
  el: '#app',
  // data 数据中心：用来初始化数据---模型层
  data: {
    uname: '<h1>小王</h2>'
  },
})

代码演示：

3、v-html html文本渲染指令特点:可以渲染html标签包裹的文本。

<div id="app">
  <p v-html="uage"></p>
</div>

var vm = new Vue({
  // el模板选择器
  el: '#app',
  // data 数据中心：用来初始化数据---模型层
  data: {
    uage: '<h2>18</h2>'
  },
})

代码演示：

4、v-bind:属性名属性绑定指令特点:可以数据到渲染某个指定的属性上。

<div id="app"> 
  <img v-bind:src="purl" alt="" v-bind:title="msg"> 
</div>

JavaScript

var vm = new Vue({
  // el模板选择器
  el: '#app',
  // data 数据中心：用来初始化数据---模型层
  data: {
    purl: './img/1.jpg',
    title: 'hello'
  },
})

代码演示：

5、v-model 表单数据渲染指令（这个指令可以实现:数据的双向绑定!

<div id="app">
  <p>
    <input type="text" name="" id="" v-model="title">
  </p>
</div>

JavaScript

var vm = new Vue({
// el模板选择器
el: '#app',
// data 数据中心：用来初始化数据---模型层
data: {
  title: 'hello'
},
})

代码演示：

6、v-on:click=""单击事件指令

<div id="app"> 
  <button v-on:click="run">点击</button> 
  <p v-html="text"></p> 
</div>

JavaScript

var vm = new Vue({
  // el模板选择器
  el: '#app',
  // data 数据中心：用来初始化数据---模型层
  data: {
    text: ''
  },
  methods: {
    run: function () {
      this.text = '你好' + this.uname;
    }
  }
})

代码演示：