- Vue是一套用于构建用户界面的渐进式框架，其核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
- Vue构建的网页由三个文件组成：html，css 和 js。
<!--HTML-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html">
<title>Vue-L1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./L1-CSS.css" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<p>好想告诉你： {{message}}</p>
</div>
<script src="./L1-JS.js"></script>
</body>
</html>
<!--JS-->
var app=new Vue({
<!--或 el:document.getElementById("abc") 或 el:'div'-->
el:'#app',
data:{
message:'Hello Vue!'
}
});
- 这里的html文件中的内容，不是原生HTML，而是html模板。在html模板中有一个{{ message }}，这个是数据绑定。相当于在html里加入了动态数据，具体数值来自js中data里的属性。改变 data 里 message 的数值，网页也会跟着变。
- Vue.js应用的创建，都是通过Vue函数创建一个Vue实例开始的：var abc=new Vue({
内容（选项）
})；
注：1.用于启动Vue应用的实例，称为：根实例。在这里也就是变量abc；
2.Vue实例都需要挂载在html中存在的元素上；
- el选项，就是为实例提供挂载元素，它的值可以是HTML元素，或者是CSS选择器（详见案例注释）；
- data选项，是用来声明应用内，需要双向绑定的数据（数据以键值对格式存储）的。在案例中，也就是message属性。
- data选项中的选项不仅可以是具体数据，也可以是一个变量(先创建text，再创建Vue实例)。
插值
插值，即插入的数值，使用双大括号{{ }}，是最基础、最常见的文本插值。文本插值会显示双向绑定的数据，eg:<p>好想告诉你：{{message}}</p>
注：html中只显示对应数据的文本，文本的内容不会被解析。
v-html
利用数据绑定输出原始html
<!--HTML-->
<body>
<div id="abc">
<!--数据绑定-->
<input type="text" v-model="message">
<p>好想告诉你：{{message}}</p>
<!--输出原始html-->
<p v-html="message">这里是v-html：{{message}}</p>
</div>
<script src="./L1-JS.js"></script>
</body>
<!--JS-->
var t={
message:"<p style='color:red'>这里是原始html</P>"
};
var abc=new Vue({
el:"div",
data:t
});
v-html.png
注：文本绑定不能用在HTML标签内部。因此上例中第二个<p>内的"这里是v-html："内容不会显示。
v-bind
动态地绑定一个或多个特性（输出HTML标签内部内容）
<!--HTML-->
<div id="abc">
<!--数据绑定-->
<input type="text" size="50" v-model="message">
<p>好想告诉你：{{message}}</p>
<!--输出原始html-->
<p v-html="message">好想告诉你：{{message}}</p>
<!--输出标签内部内容-->
<a v-bind:href="url">点我搜索</a>
</div>
<script src="./L1-JS.js"></script>
<!--JS-->
var t={
message:"<p style='color:red'>这里是原始html</P>",
url:"https://cn.bing.com/?FORM=Z9FD1"
};
var abc=new Vue({
el:"div",
data:t
});
输出结果：<a>标签内容"点我搜索"出现在页面中v-bind.png
<!--HTML-->
<p v-bind:style="{color:c}">这里是Vue</p>
<!--JS-->
var t={
c:"red"
}
var a=new Vue({
data:t
})
v-bind-color.png
{{}}
双大括号{{ }}不仅支持以上基础的绑定属性值，它也可以运算 单个JavaScript 表达式。 (表达式是JavaScript 中的一个短语, JavaScript 解释器会将其计算出一个结果。常量就是最简单的表达式。)
<!--HTML-->
<div>
<p>{{1+1}}</p>
<p>{{leave?'yes':'no'}}</p>
<p>{{message.toUpperCase()}}</p>
</div>
<!--JS-->
var t={
message:"<p style='color:red'>html</P>",
leave:yes
}
var a=new Vue({
el:div,
data:t
})
{{ }}.png
- <p>{{leave?'yes':'no'}}</p> 是三元表达式，语法是: 条件表达式 ? 表达式1 : 表达式2 。条件表达式结果为真(true)，这里的取值就是表达式1；为假(false)，取值就是表达式2
指令
指令是Vue中最常用的一项功能。它具有前缀 v- ，eg: v-html、v-bind、v-model 等。指令的主要作用是，当表达式的值改变时，将其产生的影响作用到html文件里。
v-if
v-if 根据表达式的真假渲染元素；表达式为真，元素就显示；为假，元素就不显示。
<!--HTML-->
<div>
<p>{{leave?'yes':'no'}}</p>
<p v-if="leave"></p>
</div>
<!--JS-->
var t={
leave:false
}
v-if-false.png
<!--HTML-->
<div>
<p>{{leave?'yes':'no'}}</p>
<p v-if="leave"></p>
</div>
<!--JS-->
var t={
leave:true
}
v-if-true.png
v-on
v-on 用来监听HTML 事件的，比如：用户点击元素、鼠标移动到元素上 等等。
<!--HTML-->
<div>
<p v-if="chock">显示内容</p>
<button v-on:click="change">点我隐藏内容</p>
</div>
<!--JS-->
var t={
chock:true
}
var a=new Vue({
el:"div",
methods:{
change:function(){
this.chock=false;
}
}
})
语法糖
v-bind: 可以缩写为 ：
v-on: 可以缩写为 @
参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
<a v-bind:href="url">...</a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
<a v-on:click="doSomething">...</a>
在这里参数click是监听的事件名。
网友评论