目录
Vue 复习(一)
Vue.js 不支持 IE8及以下版本
1. 安装
1.1 直接下载源码然后通过相对路径引入
1.2 CDN
1.3 使用npm下载
npm init -y
npm i vue
2. Hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
new Vue({
el:"#app",
data () {
return {
msg:"Hello World"
}
}
})
</script>
</body>
</html>
3. Vue实例的选项(基础)
3.1 el
- 作用:当前Vue实例所管理的html视图
- 值:通常是id选择器(或者是一个 HTMLElement 实例)
- 不要让el所管理的视图是html或者body
3.2 data
- Vue 实例的数据对象，是响应式数据(数据驱动视图)
- 可以通过
vm.$data访问原始数据对象 - Vue 实例也代理了 data 对象上所有的属性，因此访问
vm.a等价于访问vm.$data.a - 视图中绑定的数据必须显式的初始化到 data 中
3.3 methods
- 其值为可以一个对象
- 可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
- 方法中的
this自动绑定为 Vue 实例。 - 注意，不应该使用箭头函数来定义 method 函数 (例如
plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向 Vue 实例，this.a将是 undefined
3.4 代码演示
<div id="a">
{{msgA}} -- {{fn1()}}
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
// el作用:指定当前Vue实例所管理的视图,值通常是id选择器
// 1. el的值可以是css选择器,通常是id选择器
// 2. el的值不能是html标签和body标签
el: '#a',
// data作用:指定当前Vue实例的数据对象
// 1. data中的数据是响应式数据
// 2. 值可以是一个对象 {属性: 值}
// 3. 所有数据部分写在data中
// 4. 在当前Vue实例所管理的视图中通过属性名使用data中的数据
// 5. 可以通过vm.$data.属性 访问数据
// 6. 可以通过vm.属性 访问数据(更简单)
data: {
msgA: '第一个Vue实例对象'
},
// methods作用:指定当前Vue实例中的方法
// 1. 可以直接通过vm实例访问这些方法，
// 2. 方法中的 this 自动绑定为 Vue 实例。
// 3. 不推荐使用箭头函数
methods: {
fn1: function() {
console.log(this.msgA);
console.log('vm实例中的methods里的fn1方法被调用');
},
fn2: function() {
this.fn1();
console.log('fn2方法被调用--');
},
fn3: () => {
console.log(this);
}
}
});
// 调用fn2方法
vm.fn2();
// 调用fn3方法
vm.fn3();
</script>
4. Vue.js术语
插值表达式
作用:会将绑定的数据实时的显示出来:
通过任何方式修改所绑定的数据,所显示的数据都会被实时替换
{{js表达式、三目运算符、方法调用等}}
不能写 var a = 10; 分支语句 循环语句
<div id="app">
<!-- 在插值表达式中可以访问vm实例中data里面的属性 -->
{{message}}
<p>{{message}}</p>
<p>{{message+'啦啦啦'}}</p>
<p>{{age>18?'成年':'未成年'}}</p>
<p>{{message.split("")}}</p>
<!-- 在插值表达式中不能写js语句 -->
<p>{{var a = 10}}</p>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: '我是data中的message属性的值',
age: 20
}
});
</script>
插值表达式中不能写js语句, 如var a = 10;
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。
指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
Vue框架提供的语法
扩展了HTML的能力
减少DOM操作
<div id="app">
<p> {{message}}</p>
<!-- v-on就是vue给标签元素提供的扩展-指令
v-on指令就是给标签绑定事件,这里是click,
当事件处于点击状态时,出发methods中的changeMsg方法
-->
<button v-on:click="changeMsg">按钮</button>
</div>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: '我是data中的message属性的值',
age: 20
},
methods: {
changeMsg: function() {
this.message += "啦";
}
}
});
</script>
5. Vue常用命令
扩展了html标签的功能、大部分的指令的值是js的表达式 ，取代DOM操作 ，这里介绍常用的几个，具体请看Vue.js官方文档 https://cn.vuejs.org/v2/guide/
5.1 v-text 和v-html
- v-text:更新标签中的内容
- v-text和插值表达式的区别
- v-text 更新整个标签中的内容
- 插值表达式: 更新标签中局部的内容
- v-text和插值表达式的区别
- v-html:更新标签中的内容/标签
- 可以渲染内容中的HTML标签
- 注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- 替换标签的全部内容 -->
<p v-text="msg">我是P标签的全部内容</p>
<p v-text="msg">{{count}}</p>
<p>{{msg}}</p>
<br>
<p v-text="str"></p>
<!-- v-html 可以识别字符串标签 -->
<p v-html="str"></p>
<p v-html="stralert"></p>
</div>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
msg: 'abc',
count: 100,
str:'<span>span标签</span>',
stralert:'<span onclick="alert(1)">span标签</span>'
}
},
methods: {
}
})
</script>
</body>
</html>
5.2 v-if 和v-show
作用:根据表达式的bool值进行判断是否渲染该元素,
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用
v-show较好；如果在运行时条件很少改变，则使用
v-if较好。
<div id="app">
<!-- 如果isShow的值是true ,就显示p标签 -->
<p v-if="isShow">我是p标签中的内容</p>
<p v-show="isShow">我是p标签中的内容</p>
<!-- 如果标签显示与隐藏切换频繁, 就使用v-show
v-show本质是通过修改标签的display值
-->
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isShow: false
}
});
</script>
5.3 v-on
简写: @事件名.修饰符 = 'methods中的方法名'
-
作用:使用
v-on指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。 -
语法: @事件名.修饰符 = "methods中的方法名"
-
注意: $event 可以传形参
<div id="app"> <!-- v-on.xx事件名='当触发xx事件时执行的语句' --> <!-- 执行一段js语句:可以使用data中的属性 --> <button v-on:click="count += 1">增加 1</button> <!-- v-on的简写方法 --> <button @click="count += 1">增加 1</button> <!-- 执行一个方法 --> <button @click="add">增加 1</button> <!-- 执行一个方法、这种写法可以传形参 --> <button @click="fn1(count)">执行fn1方法</button> <!-- 执行一个方法、这种写法可以传形参,特殊的形参$event --> <button @click="fn2($event)">执行fn2方法</button> <hr> <!-- 和v-for结合使用 --> <button @click="fn3(index)" v-for="(item, index) in items">执行fn3方法</button> <!-- v-on修饰符 如 once: 只执行一次 --> <button @click.once="fn4">只执行一次</button> <p>上面的按钮被点击了 {{ count }} 次。</p> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { count: 0, items: ['a', 'b', 'c'] }, methods: { add: function() { this.count += 1; }, fn1: function(count) { console.log(count); console.log('fn1方法被执行'); }, fn2: function(e) { console.log(e); console.log('fn2方法被执行'); }, fn3: function(index) { console.log(index); console.log('fn3方法被执行'); }, fn4: function() { console.log('fn4方法被执行了'); } } }); </script> -
修饰符
.once- 只触发一次回调。.prevent- 调用event.preventDefault()。