一、第一个 Vue.js 案例
在写第一个案例之前，我们先把 vue 运行环境引入到 lib 中
还需要介绍一个知识点 ： 插值表达式
插值表达式
语法 ： {{值}}
在html标签中使用插值表达式 {{值}}，通过此方式可将 data 中的属性值以文本的形式显示在前端，插值表达式的前后都可以插入文本或者其他内容，在网页渲染时不会被覆盖，类似于占位符，同时它还有闪烁的问题需要配合 v-cloak 属性解决。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<p>{{str1}}p>
<p>{{str2}}p>
div>
<script>
// 当 Vue.js 框架包导入进来之后, 在浏览器缓存中, 就已经存在了一个 Vue 框架的构造函数
// 我们 new 出来的这个 vm 对象, 就是对页面中对于模型和视图(数据和页面元素)的整体调度者
var vm = new Vue({
el : "#app", // el 元素表现的是要指定为哪个标签进行相应的 vue.js *** 作
data : { // data 是 vue.js 中对于数据的表达, 数据约定俗成的都是以 json 的形式来呈现的
"str1" : "HelloWorld1",
"str2" : "HelloWorld2"
}
});
script>
body>
html>
我们通过 var vm = new Vue({}) 创建出来的 vm 对象，就是我们 MVVM 中的 VM 调度者。
Vue 实例 vm 所控制的这个元素区 div，就是我们的 V。
而其中的 data 就是 MVVM 中的 M，是专门用来表示数据的组件。
三、指令属性的基本使用 1. v-cloak使用 v-cloak 主要为了解决插值表达式的闪烁问题
使用插值表达式的问题：
在页面加载的过程中，在页面中的 {{}} 插值表达式首先会被页面认可为是 html 元素中的实在存在的内容。所以浏览器会首先将 {{}} 展现在页面上，页面加载完毕后，插值表达式 {{}} 才会真正的转变为动态赋予的值。这就会造成一种现象，如果将来终端在访问服务器的过程中，网速较慢(网络比较卡)，那么我们的 {{}} 会首先展现出来，{{}} 展现出来之后，会一闪而过，最终显示的是最终被赋予的值。这就是前端开发中所谓的，插值表达式的闪烁问题。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
<style>
[v-cloak] {
display: none;
}
style>
head>
<body>
<div id="app">
<p v-cloak>{{str1}}p>
<p v-cloak>{{str2}}p>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "HelloWorld1",
"str2" : "HelloWorld2"
}
});
script>
body>
html>
css 中 [] 是属性选择器
2. v-text 与 v-htmldata 属性中，存放的就是 el 中要使用到的数值。
在 vue.js 中，为了为页面中的元素渲染值(为前端标签对中的内容赋值)，可以使用 3 种方式 ：
插值表达式 {{}}v-textv-html分别用这三种方式进行页面渲染
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<p>{{str1}}p>
<p v-text="str2">p>
<p v-html="str3">p>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa",
"str2" : "bbb",
"str3" : "ccc"
}
});
script>
body>
html>
插值表达式 与 v-text/v-html 的区别
对于元素中已经存在的值，只有插值表达式能够将原有的值保留，在原有的已经存在的值的基础上添加动态数据。
使用 v-text 和 v-html 之所以不能够保留元素标签对中原有的内容，是因为在使用以上两个指定属性之前，会提前将标签对中的内容先清空掉，在赋予动态的值。
如果未来的实际项目开发，需求为在原有的内容的基础上，追加动态的值，我们要选择使用插值表达式。
从另一个方面来看，插值表达式虽然会出现 {{}} 页面闪烁的现象 (v-text 和 v-html 不会出现页面闪烁的情况)，但是对于原有内容的保留，只有插值表达式能够完成，所以插值表达式具有不可替代的优势。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<p>=={{str1}}==p>
<p v-text="str2">=====p>
<p v-html="str3">=====p>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa",
"str2" : "bbb",
"str3" : "ccc"
}
});
script>
body>
html>
v-text 与 v-html 的区别
v-text ：
主要是用来赋予纯内容的，如果赋予到元素中的内容本身包含 html，那么 v-text 会将 html 原封不动的展现在页面上，这些内容是得不到浏览器的解析的。
v-html :
除了能够为前端元素赋予内容之外，更重要的是，如果内容本身含有 html 代码，那么赋值后最终展现出来的结果，html 元素会得到浏览器的解析的。从以上结果判断，v-html 的功能要更加强大，对于前端页面的展现，不可能让使用该系统的用户看到任何 html 代码，而是应该让用户看到解析后的 html 效果。所以在实际项目开发中，使用 v-html 的概率要高于 v-text。 另外使用插值表达式的效果，与 v-text 是一样的，内容中的 html 代码时得不到浏览器的解析的。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<p>{{str1}}p>
<p v-text="str2">p>
<p v-html="str3">p>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa",
"str2" : "bbb",
"str3" : "ccc"
}
});
script>
body>
html>
v-bind ：
v-bind 是 Vue.js 中，提供用于绑定属性的指令。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<input type="text" v-bind:value="str1">
<p v-bind:title="str2">content...p>
<input type="button" value="submit" v-bind:title="str3">
div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa",
"str2" : "bbb",
"str3" : "ccc"
}
});
script>
body>
html>
对于 v-bind 在开发中一共有如下几种使用方式
a. 直接使用指令属性 v-bind 来为元素中的属性进行绑定 *** 作b. 使用简化后的方式，将 v-bind 去除，直接使用:来对元素中的额属性进行绑定。
因为在实际项目开发中，对于前端元素的绑定是我们的常规 *** 作，v-bind 的使用复用率非常高，所以每一次都直接写 v-bind 会很麻烦，所以 Vue.js 为 v-bind 指令属性提供了简写的方式，直接使用 : 即可。
v-bind:title --> :title
注意：这种简写形式仅仅只是针对于我们的 v-bind，以上所讲解的其他的指令是不具备简写形式的。
在实际项目开发中，我们都是使用这种简写的形式。
上述代码中修改为
<input type="text" :value="str1">
<p :title="str2">content...p>
<input type="button" value="submit" :title="str3">
显示出来的效果一样
c.在使用 v-bind 对元素中的属性进行绑定的时候，可以直接在 *** 作值的位置进行内容的拼接。<input type="text" :value="str1 + 'HelloWorld'">
我们通常使用 v-on 指令来触发事件。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<input type="text" :value="str1"/>
<input type="button" value="点击1" onclick="fun2()">
<input type="button" value="点击2" v-on:click="fun1">
div>
<script>
function fun2() {
alert("abc");
}
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa"
},
// methods:表示 vue 中对于绑定事件函数的定义, 可以同时定义多个函数，多个函数直接用 , 来分割
methods : {
fun1() {
alert("abc");
}
}
});
script>
body>
html>
我们要注意的是 methods 属性与 el 绑定元素挂钩，只有其本身或子元素才能使用 methods 中定义方法。
1. 基本使用我们用 v-on:click="fun1" 的形式来绑定事件，就相当于原生 js 中的 onclick，其中fun1 为函数名，后面不用加()
类似于 v-bind: 可以用 : 来代替，同样 v-on: 可以用 @ 来代替
对上述代码中 v-on 进行替换，显示效果相同
<input type="button" value="点击2" @click="fun1">
使用.stop 来对事件的冒泡机制进行阻止。js 中的事件的冒泡指的是，在触发了内层元素的同时，也会随之继续触发外层元素(外层元素包裹了内层元素)，在做点击的过程中，点击了内层元素，也可以认为是同时点击了外层元素。所以两个事件都会触发。
在实际项目开发中，几乎没有太多需求会使用到这种事件冒泡的机制，所以我们需要阻止事件的冒泡。阻止事件冒泡之后的效果是，在我们点击了内层元素之后，内层元素绑定的事件触发，触发完毕后，由于事件冒泡被阻止，就不会继续触发外层元素的事件了。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<div style="width:200px;height:200px;background-color:brown" @click="fun1">
<div style="width:100px;height:100px;background-color:rgb(22, 213, 230)" @click.stop="fun2">
div>
div>
div>
<script>
function fun2() {
alert("abc");
}
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa"
},
methods : {
fun1() {
alert("触发外层div");
},
fun2() {
alert("触发内层div");
}
}
});
script>
body>
html>
点击蓝色块，只显示触发内层div，表示冒泡被终止
② .prevent使用.prevent 来阻止超链接默认的行为。所谓默认的行为指的是超链接中的 href 属性链接。在实际项目开发中，不仅仅只是按钮需要我们绑定事件来控制行为，超链接的使用我们也是要遵循这种自己绑定事件触发行为的方式。所以在 a 标签中的 href 链接往往要被我们以特殊的方式处理掉。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<a href="https://www.baidu.com" @click="fun1">点击1a>
<a href="https://www.baidu.com" @click.prevent="fun1">点击2a>
div>
<script>
function fun2() {
alert("abc");
}
var vm = new Vue({
el: "#app",
data: {
"str1": "aaa"
},
methods: {
fun1() {
alert("点击1");
}
}
});
script>
body>
html>
点击 点击2 超链接 出现警示框但不跳转
③ .capture使用.capture 实现捕获触发事件的机制。
使用的是外层 div 套用内存 div 的例子(其中内层 div 没有选择阻止冒泡)，在此基础之上，点击内层的 div，先触发内层 div 的事件，再触发外层 div 的事件。
加入了 .capture 修饰符之后，先触发的是外层的 div 事件，后触发的是内层 div 事件。被 .capture 修改之后，事件优先触发。
④ .selfself 实现阻止事件冒泡行为的机制(之前我们讲过了一个.stop)。使用 .self 实现的是阻止自身冒泡的行为 (它不会真正的阻止冒泡) 。
案例：外层 div，内层 div，在内层 div 中加入了 button
测试 1：在内层 div 加入.stop 修改符，观察实验结果。
点击最内层的按钮，触发按钮事件，触发了内层的 div，外层 div 没有触发，也就是说，使用.stop 修改符，不会阻止掉自身事件的触发，在自身事件触发完毕之后，阻止事件继续向外扩散。
测试：在内层 div 加入.self 修改符，观察实验结果。
点击按钮，触发按钮事件，没有触发内层 div 事件，跨过了内层 div 事件的触发后，继续触发了外层 div 的事件。 表示使用.self 只是将当前元素 (测试中的内层 div) 的冒泡行为阻止掉了，但是不会影响冒泡行为继续向外扩散 (测试中的外层 div 继续触发了)。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<div style="width:200px;height:200px;background-color:brown" @click.capture="fun1">
<div style="width:100px;height:100px;background-color:rgb(22, 213, 230)" @click.stop="fun2">
<input type="button" value="点击" @click="fun3">
div>
div>
div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "aaa"
},
methods : {
fun1() {
alert("触发外层div");
},
fun2() {
alert("触发内层div");
},
fun3() {
alert("触发大层div");
}
}
});
script>
body>
html>
使用.once 修饰符，只触发一次事件处理函数。.once 需要结合 .prevent 来使用 在我们使用事件修饰符的时候，有可能会存在这样的需求，需要同时为 @click 事件使用多个修饰符。例如我们现在就需要同时使用.once 和.prevent 修饰符。在使用的时候，通过绑定事件的 @click 连续的绑定修饰符就可以了。
语法： @click.prevent.once
测试：通过超链接的触发来观察，在只使用 @click 的时候 (没有做任何修饰符的修饰)，点击超链接，先触发@click，后触发 href 链接。 当为@click 添加@click.prevent.once 之后，点击超链接。
第一次点击：只触发了@click 的事件，href 链接没有触发
第二次点击 (已经点击过一次之后再次点击) ：没有触发@click，只触发了 href。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./lib/vue-2.4.0.js">script>
head>
<body>
<div id="app">
<a href="https://www.baidu.com" @click="fun1">点击1a>
<a href="https://www.baidu.com" @click.prevent.once="fun1">点击2a>
div>
<script>
function fun2() {
alert("abc");
}
var vm = new Vue({
el: "#app",
data: {
"str1": "aaa"
},
methods: {
fun1() {
alert("点击1");
}
}
});
script>
body>
html>
v-bind 单向数据绑定示意图
我们可以对 v-bind 的绑定数据的形式得出一个结论，v-bind 只能 实现数据的单向绑定，从模型（M）绑定到视图（V），使用 VM 将数 据去渲染视图，但是我们无法通过该形式实现数据的双向绑定。
双向数据绑定示意图
在实际项目开发中，不仅仅只是将模型准确的渲染到视图中，视图中的数据的变化，更需要模型去进行有效的记录。所以我们需要使用双向数据绑定的机制。
v-model 的基本使用
使用 v-model 可以对数据进行双向的绑定 *** 作。 值得注意的是，由于记载页面元素值的需求都是发生在表单元素中，所以 v-model 只能运用在表单元素中。 form type:text,hidden,checkbox,radio....