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方式

NPM下载

$ npm install vue

---

模板语法

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

{{ msg }}

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

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

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

☑ 使用字符串一些函数

{{ msg }}
{{ 'hassgy' }}
{{ 2+3 }}
{{ {'name':'hassgy'} }}
{{ bird.color }}
{{ 1>2? 'True': 'False' }}
{{ msg2.split('').reverse().join('') }}

指令系统

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

v-text 文本(innertext)

{{ msg }}
{{ msg }}

v-html html解析(innerhtml)

Using mustaches: {{ rawHtml }}
Using v-html directive: 

v-if和v-show

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

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

 

 
现在你看到我了
 

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

现在你看到我了

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

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

 

      
 鼠标悬停几秒钟查看此处动态绑定的提示信息！
 
 

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

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

...

...

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

☑ 也是可以缩写，@

...

...

v- for 遍历列表数组数据

 

 

 

 {{ todo.text }}
 
 
 

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 输入与应用状态双向绑定

 
{{ message }}
 

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

这里介绍一下设计模式：

MVVM（Model-View-ViewModel）

• Model就是Vue应用里面的data

• View则是目标标签

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

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