Vue的模板语法

Vue的基本用法

👉Vue.js官网：https://cn.vuejs.org/

---

介绍

前端的JavaScript其实有三大框架。

☑ Vue - 渐进式的JavaScript框架，boss是尤雨溪

☑ React - 这个是Facebook公司那边的，里面的高阶函数超级多，对初学者不友好。

☑ Angular - Google公司那边的，学习这个框架之前你得入门以下TypeScript。

⚠ Vue2.0以后的版本以及React（ES6高阶函数）初学者学习会比较吃力。

---

Vue下载

vue.png 安装Vue.png

script直接引入方式

开发环境以及学习，我们使用开发版本：https://cn.vuejs.org/js/vue.js

CDN方式

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

NPM下载

$ npm install vue

---

模板语法

首先，新建一个htm文件，添加以下代码。

<div id = "box"><p>{{ msg }}</p></div>

new Vue({
    el: '#box',
    data: {
        msg: '我喜欢你'，
        bird: {
            color: 'blue'
        },
        msg2: 'Hello Vue!!!'
    }    
});

☑ 和JinJa模板语法很像，{{ 变量名 }}.

☑ 里面可以是字符串，对象，js表达式，三元运算符（代替if else）

☑ 使用字符串一些函数

<!--模板语法-->
<p>{{ msg }}</p>
<p>{{ 'hassgy' }}</p>
<p>{{ 2+3 }}</p>
<p>{{ {'name':'hassgy'} }}</p>
<p>{{ bird.color }}</p>
<p>{{ 1>2? 'True': 'False' }}</p>
<p>{{ msg2.split('').reverse().join('') }}</p>

指令系统

接下来你会发现，指令都带 v- 开头，表示Vue提供的特殊属性；v-for是例外。

v-text 文本(innertext)

<!-- 加入上面的msg是”<h2>hassgy</h2>“ -->
<div id="box"><p v-text="msg">{{ msg }}</p></div>
<div id="box"><p v-html="msg">{{ msg }}</p></div>

v-html html解析(innerhtml)

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

v-if和v-show

☑ 这里的v-show 相当于 style.display

⚠ v-if和v-show区别在于：if是真正实在性的条件渲染，而show仅表现在css的切换

 <div id="app-3">
 <p v-if="seen">现在你看到我了</p>
 </div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

现在你看到我了

当你在控制台输入 app3.seen = false，你会发现显示的消息消失了。

v-bind 绑定标签的（任何）属性

 <div id="app-2">
      <span v-bind:title="message">
 鼠标悬停几秒钟查看此处动态绑定的提示信息！
 </span>
 </div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

☑ 之后的用法可以缩写不要

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

v-on 监听js（DOM）所有事件

☑ 也是可以缩写，@

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

v- for 遍历列表数组数据

 <div id="app-4">
 <ol>
 <li v-for="todo in todos">
 {{ todo.text }}
 </li>
 </ol>
 </div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

1. 学习 JavaScript
2. 学习 Vue
3. 整个牛项目

在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

v-model 输入与应用状态双向绑定

<div id="app-6">
 <p>{{ message }}</p>
 <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

这里介绍一下设计模式：

MVVM（Model-View-ViewModel）

• Model就是Vue应用里面的data

• View则是目标标签

• ViewModel则是目标标签v指令的操作，如目标标签v-bind

以上的例子就是Vue官方文档的例子，您可前往去探索。