Vue2基础速成

一、准备工作

首先下载vue2的JavaScript库，并且命名为vue.min.js

下载链接：https://cdn.jsdelivr.net/npm/vue@2（若链接失效可去vue官网寻找）
CTRL+S即可下载保存

文件目录结构

二、使用操作原生DOM与使用VUE操作DOM的便捷性比较

操作原生DOM

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"></div><script>let value = '这是内容'document.getElementById('app').textContent = valuevalue = '这是新的内容'document.getElementById('app').textContent = value</script>
</body></html>

使用VUE操作DOM

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- 1.2插值表达式 --><p>{{title}}</p><p>{{content}}</p><p>{{1+2+3}}</p><p>{{1>2?'对':'错'}}</p></div><script src="./vue.min.js"></script><script>//1、响应式数据与插值表达式const vm = new Vue({el: '#app',data() {return {title: '这是标题文本',content: '这是内容文本'}}})</script></body></html>

三、其它使用VUE操作DOM的技巧

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- 1.2插值表达式 --><p>{{title}}</p><p>{{content}}</p><!-- <p>{{1+2+3}}</p><p>{{1>2?'对':'错'}}</p><p>{{output()}}</p><p>{{output()}}</p><p>{{output()}}</p><p>{{outputContent}}</p><p>{{outputContent}}</p><p>{{outputContent}}</p> --><!--4、指令 --><!-- 内容指令 --><!-- <p v-text="title">123</p><p v-html="content">123</p> --><!-- <p v-text=htmlContent>123</p><p v-html=htmlContent>123</p> --><!-- 渲染指令 --><!-- <p v-for="(item,key,index) in arr">这是内容：{{item}}-{{key}}</p><p v-for="(item,key,index) in obj">这是内容：{{item}}-{{key}}-{{index}}</p> <p v-if="false">标签内容</p><p v-show="bool">标签内容</p> --><!-- 属性指令 --><!-- <p v-bind:title="title">标签内容</p><p :title="title">标签内容</p> --><!-- 事件指令 -->//下面这行是属性指令<!-- <button v-on:click="output">按钮</button> --><!-- <button @click="output">按钮</button> --><!-- 表单指令：v-model可以实现双向数据绑定 --><input type="text" v-model="inputValue"><p v-text="inputValue"></p><!-- 5、修饰符 --><input type="text" v-model.trim="inputValue"></div></div><script src="./vue.min.js"></script><script>//1、响应式数据与插值表达式const vm = new Vue({el: '#app',data() {return {title: '这是标题文本',content: '这是内容文本',htmlContent: '这是一个<span>span</span>标签',arr: ['a', 'b', 'c', 'd'],obj: { a: 10, b: 20, c: 30 },bool: true,inputValue: '默认内容'}},//1.3methods属性methods: {output() {console.log('methods执行了')return '标题为：' + this.title + ',' + '内容为' + this.content}},//2、计算属性：具有缓存性computed: {outputContent() {console.log('computed执行了')return '标题为：' + this.title + ',' + '内容为' + this.content}},//3、侦听器watch: {title(newVal, oldVal) {console.log(newVal, oldVal)}}})</script></body></html>