01-Vue基础之模板语法
文章目录
-
- 01.Vue 概述
-
- 1.1.简介
- 1.2.VUE实例属性（七大属性）
- 1.3.注意事项
- 02.Vue入门案例（helloworld）
- 03.VUE模板语法概述
- 04.VUE中的数据绑定（插值语法）
-
- 4.1.Vue中数据绑定概述
- 4.2.插值语法之v-cloak插值指令
- 4.3.插值语法之v-text插值指令
- 4.4.插值语法之v-html插值指令
- 4.5.插值语法之v-pr插值指令
- 4.6.插值语法之v-once插值指令
- 4.7.插值语法v-model双向数据绑定插值指令：
- 05.MVVM模型概述
- 06.数据代理概述
-
- 6.1.Object.defineproperty方法
- 6.2.Vue中的数据代理
- 07.Vue中的事件绑定（指令语法）
-
- 7.1.Vue事件绑定概述
- 7.2.Vue事件的基本使用：v-on
- 7.3.Vue中的事件修饰符
-
- 7.3.1.prevent
- 7.3.2.stop
- 7.3.3.once
- 7.3.4.capture
- 7.3.5.self
- 7.3.6.passive
- 7.4.Vue中的键盘事件修饰符
- 7.5.自定义键盘事件修饰符别名
- 08.Vue中的属性绑定（指令语法）
-
- 8.1.Vue中的属性绑定概述
- 8.2.Vue属性绑定的基本使用：v-bind
-
- 8.2.1.使用v-bind:class绑定标签元素样式
- 8.2.2.使用v-bind:style绑定标签元素样式
- 8.2.3.使用class绑定对象和绑定数组的区别
- 拓展01.el与data的两种写法
-
- el的两种写法
- data的两种写法
- 拓展02：如何理解前端渲染？
01.Vue 概述
1.1.简介
- Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
- vue 是一个JS代码库，不仅易于上手，还便于与第三方库或既有项目整合
- 官网：https://cn.vuejs.org/v2/guide/
Vue特点：
易用：熟悉HTML，CSS，JS，可以很快上手VUE
灵活：在一个库和一个完整框架之间伸缩自如
高效：20kb运行大小，超快虚拟DOM
1.2.VUE实例属性（七大属性）
1、el属性：用于指定当前Vue实例为哪个容器服务，值通常为css选择器。
2、data属性：用于存储数据，数据供el所指定的容器去使用。
3、template属性：用来设置模板，会替换页面元素，包括占位符。
4、methods属性：放置页面中的业务逻辑，js方法一般都放置在methods中。
5、render属性：创建真正的Virtual Dom。
6、computed属性：用来计算，根据已经存在的属性计算出新的属性，对于同样的数据，会缓存。当其依赖属性的值发生变化是，这个属性的值会自动更新，与之相关的DOM部份也会同步自动更新。
7、watch侦听属性：监听data中数据的变化，两个参数，一个返回新值，一个返回旧值，当你有一些数据需要随着其它数据变动而变动时或者执行异步操作或开销较大操作时，建议使用watch。
注意：
computed和methods的区别：
- computed：是在值发生改变的时候才会触发效果。
- methods：只要刷新执行了就会触发，所有平时写VUE的时候，能用computed的尽量使用。
computed和watch的区别：
- watch：监视,能够监听到数据的变化，只要数据变化的时候,都会自定执行对应的方法，其中可以检测的数据来源分为三部分 data , computed , props
- computed：计算属性,存在一个计算缓存的特性，每一次计算之后,只要里面的逻辑不发生变化，每一次重复调用，都会使用上一次执行的结果,能够节省计算的时间。
1.3.注意事项
1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
new Vue({配置对象})
2、html容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
<div id="root">
<h1>Hello，{{name}}h1>
div>
3、root容器里的代码被称为Vue模板；
<div id="root">
<h1>Hello，{{name}}h1>
div>
4、Vue实例和容器是一一对应的，一个Vue实例只能与一个容器对应，同样一个容器也只能对应一个Vue实例；
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<!-- 容器 -->
<div id="demo">
<h1>Hello，{{name}}</h1>
</div>
<script type="text/javascript" >
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//Vue实例
new Vue({
el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据，数据供el所指定的容器去使用。
name:'AISMALL'
}
})
</script>
5、真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6、{{xxx}}中的xxx要写js表达式，且xxx也可以自动读取到data中的属性，一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
注意区分：js表达式 和 js代码(语句)
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2.js代码(语句)
(1). if(){}
(2). for(){}
7、完整案例如下：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>初识Vuetitle>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="demo">
<h1>Hello，{{name}h1>
div>
<script type="text/javascript" >
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name:'AISMALL'
}
})
script>
body>
html>
02.Vue入门案例（helloworld）
下面介绍三种引入JS的方式：
第一种：使用传统的js写法（原生JS）
<div id="msg"><div>
<script type="text/javascript">
//定义一个变量
var msg='hello world';
//获取div对象的id
var div=document.getElementById('msg');
//把msg内容填充到div标签内部
div.innerHTML=msg;
script>
第二种：使用JQuery框架封装的JS写法
<div id="msg"><div>
<script type="text/javascript" src="js/jquery.js">script>
<script type="text/javascript">
var msg='hello world';
//通过#msg获取div标签id，然后把值填充到div标签
$('#msg').html(msg);
script>
第三种：使用Vue框架封装的JS语法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="msg">
<div>{{MSG}}div>
<div>{{MSG + 666}}div>
div>
<script type="text/javascript" src="../js/vue.js">script>
<script type="text/javascript">
var vm = new Vue({
//使用# 获取标签id
el: '#msg',
//data 里面是要传入到标签里面的数据
data: {
//替换标签里面的值MSG
MSG: 'Hello Vue'
}
});
script>
body>
html>
分析：由于是学习VUE框架，接下来主要分析VUE框架的使用方法：
-
下载
vue.js的链接：https://cn.vuejs.org/v2/guide/installation.html注意：vue框架有两种不同的版本 - vue.js（代码易于阅读，但是占用空间大）：开发时使用 - vue.min.js（代码不易阅读，占用空间小） ：部署时使用 -
VUE实例参数分析：el（element）：元素的挂载位置（值可以是CSS选择器或者DOM元素） - 通过这个配置属性可以将vue实例和html容器建立连接 - 如果html容器中配置的不是id属性，而是class属性，el中可以使用 .属性名称 的方式进行挂载 data:模型数据（值是一个对象），键值对的形式，可以写多个键值对 -
插值表达式语法：将数据填充到HTML标签中插值表达式支持基本的计算操作： - 字符串拼接：<div>{{MSG + 666}}</div> - 简单计算：<div>{{1+2}}</div>
Vue代码运行原理：
Vue语法–>Vue框架解析–>原生JS代码
03.VUE模板语法概述
模板语法分为两种：
-
插值语法：简单的理解为将值插入到指定标签的标签体中。功能：用于解析标签体内容。- 写法：
{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
<h1>标签体内容h1> <h1>{{xxx}}h1> -
指令语法：简单理解为给指定标签添加标签属性。功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。- 举例：
v-bind:href="xxx"或 简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
<h1 herf='标签属性'>标签体内容h1> <h1 v-bind:herf='标签属性'>{{xxx}}h1> <h1 :herf='标签属性'>{{xxx}}h1>
举例如下：
<script type="text/javascript" src="../js/vue.js">script>
<div id="root">
<h1>你好，{{name}}h1>
<a v-bind:href="url">{{webName}}01a>
<a :href="url">{{webName}}02a>
div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'jack',
webName:'百度一下',
url:'www.baidu.com'
}
})
script>
04.VUE中的数据绑定（插值语法）
4.1.Vue中数据绑定概述
Vue中有2种数据绑定的方式：
- 1.
单向绑定(v-bind)：数据只能从data流向页面。 - 2.
双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
注意：
- 1.双向绑定一般都应用在
表单类元素上（如：input、select等），因为可以从data中获取值改变标签中的值，还可以通过用户输入值改变标签的值，这样才可以称为双向。 - 2.
v-model:value可以简写为 v-model，因为v-model默认收集的就是value值。
举例如下：
<script type="text/javascript" src="../js/vue.js">script>
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name"><br/>
双向数据绑定：<input type="text" v-model:value="name"><br/>
单向数据绑定：<input type="text" :value="name"><br/>
双向数据绑定：<input type="text" v-model="name"><br/>
div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'AISMALL'
}
})
script>
4.2.插值语法之v-cloak插值指令
插值语法存在的问题：闪动
如何解决该问题：使用v-cloak插值指令
解决该问题的原理：先隐藏，替换好值之后再显示最终的值
用法：
- 1.提供样式
- 2.让带有插值的语法添加 v-cloak 属性在数据渲染完成之后，v-cloak 属性会被自动去除， v-cloak一旦移除也就是没有这个属性了，属性选择器就选择不到该标签，也就是对应的标签会变为可见。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
/*1.*/
[v-cloak]{
display: none;
}
style>
head>
<body>
<div id="app">
<div v-cloak>{{msg}}div>
div>
<script type="text/javascript" src="../js/vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
script>
body>
html>
4.3.插值语法之v-text插值指令
v-text：指令可以给标签赋值
- 使用v-text指令给标签赋值的时候
直接写对应变量的名称，就会直接将变量的值渲染到标签中。 - 使用v-text指令的HTML标签中
不要写插值语法，因为写内容也会被v-text指定的内容替换掉。 - 注意：此处为单向绑定，数据对象上的值改变，插值会发生变化，但是当插值发生变化并不会影响数据对象的值
DOCTYPE html>
<html>
<head>
<title>v-texttitle>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="app">
<p v-text="msg01">p>
<p v-text="msg02">
<p v-text="msg01">{{msg02}}p>
div>
<script>
new Vue({
el: '#app',
data: {
msg01: 'Hello Vue.js',
msg02:'hello Vue.js
'
}
});
script>
body>
html>
4.4.插值语法之v-html插值指令
v-html：指令也可以给标签赋值，用法和v-text指令类似。
v-text与v-text的区别：
- v-text输出的是纯文本，浏览器不会对其再进行html解析
v-html会将其当html标签解析后输出
DOCTYPE html>
<html>
<head>
<title>v-htmltitle>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="app">
<p v-html="msg01">p>
<p v-html="msg02">
<p v-html="msg01">{{msg02}}p>
div>
<script>
new Vue({
el: '#app',
data: {
msg01: 'Hello Vue.js',
msg02:'hello Vue.js
'
}
});
script>
body>
html>
可能存在安全问题： 一般只在可信任内容上使用v-html，永不用在用户提交的内容上使用v-html。
DOCTYPE html>
<html>
<head>
<title>v-html安全性问题title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<div v-html="str">div>
<div v-html="str2">div>
div>
body>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
str:'Hello Vue.js！
',
str2:'戳一下',
}
})
script>
html>
4.5.插值语法之v-pr插值指令
v-pre：指令让标签显示原始信息跳过编译过程。
用途：一些静态的内容不需要编译加这个指令可以加快渲染
DOCTYPE html>
<html>
<head>
<title>v-pre指令title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<h2 v-pre>Vue其实很简单h2>
<h2 v-pre>当前的n值是:{{n}}h2>
<h2 >当前的n值是:{{n}}h2>
<button @click="n++">点我n+1button>
div>
body>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
n:1
}
})
script>
html>
4.6.插值语法之v-once插值指令
v-once：指令顾名思义，执行一次性的插值当数据改变时，插值处的内容不会继续更新。
DOCTYPE html>
<html>
<head>
<title>v-once指令title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<h2 v-once>初始化的n值是:{{n}}h2>
<h2>当前的n值是:{{n}}h2>
<button @click="n++">点我n+1button>
div>
body>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
n:1
}
})
script>
html>
4.7.插值语法v-model双向数据绑定插值指令：
-
什么是双向数据绑定
当数据发生变化的时候，视图也就发生变化 当视图发生变化的时候，数据也会跟着同步变化 -
v-model是一个指令，限制在
、