Vue--Vue 模板语法--Vue 指令（⽂本渲染,v-bind 绑定,class 和 style 。。。
⽬录
Vue.js 是⼀套构建⽤户界⾯的渐进式。与其他重量级框架不同的是，Vue 采⽤⾃底向上增量开发的设计。Vue 的核⼼库只关注视图层，它不仅易于上⼿，还便于与第三⽅库或既有项⽬整合。另⼀⽅⾯，当与单⽂件组件和 Vue ⽣态系统⽀持的库结合使⽤时，Vue 也完全能够为复杂的单页应⽤程序提供驱动。
Vue.js 提供了 MVVM (Model-View-ViewModel 的简写)数据绑定和⼀个可组合的组件系统，具有简单、灵活的 API。MVVM:
它采⽤双向绑定（data-binding）：View 的变动，⾃动反映在ViewModel，反之亦然。
Vue 框架有以下特点:
1. 简洁： HTML 模板 + JSON 数据。
2. 数据驱动： ⾃动追踪依赖的模板表达式和计算属性。 3. 组件化： ⽤解耦、可复⽤的组件来构造界⾯。
4. 轻量： ~24kb min+gzip，⽆依赖。
5. 快速： 精确有效的异步批量 DOM 更新。
6. 模块友好： 通过 NPM 或 Bower 安装，⽆缝融⼊你的⼯作流。
⼀.Vue 模板语法
1.创建⼀个新的 Vue 实例 :
2.准备 html(在 Vue 的 html 中使⽤{undefined{}}来获取组件定义的 data 数据) :
3.引⽤Vue.js 搭建好 Vue 环境，开始准备使⽤ Vue :
⼀个 Vue 应⽤由⼀个通过 new Vue 创建的根 Vue 实例:
var app = new Vue({ });
1
<div id="sfsf">2 {{message}}3 </div>
1
<!-- 引⼊ vue -->2
<script src="../vue.js"></script>3
<script>4
var app = new Vue({5
//绑定 id 为 app 的 html 代码⽚段6
el:'#app',7
//定义在代码⽚段可以使⽤的数据8
data:{9
message:"hello"10
}11 });12 </script>
1).el(element)代表要绑定 html 代码⽚段的根元素;
2).data 定义该代码⽚段上绑定的数据
⼀.
数据绑定最常见的形式就是使⽤“Mustache”语法 (双⼤括号) 的⽂本插值：
<div id="sfsf">{{message}}</div>
Mustache 标签将会被替代为对应数据对象上 message 属性的值。⽆论何时，绑定的数据对象上 message 属性发⽣了改变，插值处的内容都会更新 .
⼆.JavaScript
在 Vue 模板中，提供了完全的 JavaScript 表达式⽀持
1 {{ number + 1 }}//数值运算
2
3 {{ ok ? 'YES' : 'NO' }}//三⽬运算符
4
5 {{ message.split('').reverse().join('') }}//字符串⽅法操作
注意：只能在模板中写⼊表达式，⽽不能使⽤ js 语句，所以下⾯的写法会报错:
1 <!-- 这是语句，不是表达式 -->
2 {{ var a = 1 }}
3 <!-- 流控制也不会⽣效，请使⽤三元表达式 -->
4 {{ if (ok) { return message } }}
⼆.指令
指令 (Directives) 是带有 v- 前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产⽣的连带影响，响应式地作⽤于 DOM.
⼀.⽂本渲染
1. v-text: 在 html 中插⼊数据，跟{undefined{ }}功能⼀致
1 <div id="sfsf">
2 <h
3 v-text="msg"></h3>
3 <!-- 效果⼀致 -->
4 <h3>{{msg}}</h3>
5 </div>
6 <script>
7 new Vue({
8 el:'#app',
9 data:{
10 msg:'shanghai'
11 }
12 });
13 </script>
2. v-once: 数据只会更新⼀次，下次更新不影响dom
1 <div id="app">
2 <span v-once>{{msg}}</span>
3 <h3>{{msg}}</h3>
4 </div>
5 <script>
6 var app = new Vue({
7 el:'#app',
8 data:{
小学课堂教学模式9 msg:'shanghai'
10 }
11 });
12 </script>
3. v-html: 可以显⽰html元素
1 <div id="app">
2 <span>{{msg}}</span>
3 <h3 v-html="msg"></h3>
4 </div>
5 <script>
6 var app = new Vue({
7 el:'#app',
8 data:{
9 msg:'<h1>Hello Vue</h1>'
10 }
11 });
12 </script>
⼆.class和style绑定
1.v-bind指令可以绑定元素的属性，动态给属性赋值,⽐如:v-bind:class,v-bind:style,v-bind:href形式 格式: v-bind：属性名="组件中定义的数据"
简化为: 属性名="组建中定义的数据"
改写成: :class,:style,:href等
1 <div id="app">
2 <div title="你好">hello</div>
3 <hr />
4 <div v-bind:title="msg">fnoefhoijfi</div>
5 <hr />
6 <div :title="msg">fuhuef</div>
7 <hr />
8 <img :src="src" />
9 <hr />
10 <a :href="href">fsada</a>
11 </div>
12 <script type="text/javascript">
13 var app = new Vue({
14 el:"#app",
15 data:{
16 msg:"jisajfoif",
17 src:"www.baidu"
18 href:"www.sxt"
19 }
20 });
21 </script>
2. class: 绑定DOM对象的class样式有以下⼏种形式:
绑定多个class
使⽤对象classObject绑定
使⽤数组classlist绑定
绑定的对象可以同时切换多个class
1 <div id="app">
2 <div class="red green item">vue</div>
x123 <hr />
4 <div :class="{red:true,green:false,item:true}">vue</div>
5 <hr />
6 <div :class="classObj">Vue</div>
7 <div :class="classList">Vue</div>
8 </div>
9 <script type="text/javascript">
10 var app = new Vue({
11 el:"#app",
12 data:{
13 classObj:{
14 red:true,
武汉十五中张飞跃事件15 green:false, 16 item:true
17 },
18 classList:["red","green","test"]
19 }
20 });
21 </script>
对象和数组绑定的区别:
对象可以控制class的添加和删除，数组不能控制删除
3. style绑定
绑定形式与class⼀致
使⽤内联对象Object
直接传⼊对象styleobject
使⽤数组对象styleList
1 <div id="app">
2 <div >赢你⼤爷啊</div>
bind93 <hr />
雏鹰争章网
4 <div :>赢你⼤爷啊</div>
5 <hr />
6 <div :>赢你⼤爷啊</div>
7 <hr />
8 <div :>赢你⼤爷啊</div>
9 </div>
10 <script type="text/javascript">
11 var ass = new Vue({
波波图12 el:"#app",
13 data:{
14 styleObj:{
15 'color':'green',
16 'font-size':'15px',
17 'font-family':'⾪书'
18 },
19 styleObj2:{
20 'background':'pink'
21 }
22 }
23 });
24 </script>
三.事件处理
1. 监听事件
语法:v-on：事件名
简写:@事件名监听事件 :
1 <button v-on:click="count++">增加</button>
2 <button @click="count--">减少</button>
2. ⽅法事件处理器
⼀般来说事件会绑定⼀个⽅法，在⽅法内部处理相关的事件逻辑。需要在 methods 属性中定义⽅法，然后 v-on 引⽤对应相关的⽅法名。
1 <div id="app">
2 count:{{count}}
3 <button @click="addCount()">增加</button>
4 <button @click="downCount()">减少</button>
5 </div>
6 <script type="text/javascript">
7 var sds = new Vue({
8 el:"#app",
9 data:{
10 count:0
11 },
12 methods:{
13 addCount:function(){
14 unt++;
15 },
16 downCount:function(){
17 unt--;
18 }
19 }
20 });
21 </script>
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议