做百度糯米网站的团队做的比较好的个人网站
vue2
文章目录
- vue2
- 1.下载 vue develop 插件给浏览器
- 2.核心语法
- 1.new Vue
- 2.使用 vue 的特性：
- 2.1插值表达式和响应式数据
- 2.2methods 属性
- 2.3计算属性：具有缓存性 computed
- 2.4侦听器
- 2.5指令
- v-text v-html
- v-for
- v-if v-show
- v-bind
- 事件指令 v-on
- v-model
- 2.6修饰符
- 专栏文章：
1.下载 vue develop 插件给浏览器
再浏览器扩展中下载插件
2.核心语法
首先我们先新建一个文件夹存放我们的学习代码，这里你们自己选择位置：
这里我在我的 code 文件夹下面新建了一个 vue2 文件夹，用于存放项目代码
这里我们需要新建一个 index.html 文件
使用开发工具打开这个 vue 2项目， 并且生成初始化的代码结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>
这里可以选择两种初始化方式：
1.使用 vue 官网的在线引入文件（初学）
2.使用 vue cli 基于脚手架的方式（后面介绍）
这里我们讲解第一种方式：
vue官网： https://v2.cn.vuejs.org/
这里需要注意，由于是初学者，我们先学习 vue2
点击这里的起步按钮
就会发现 vue 是可以直接通过 cdn 的方式引入
也就是通过 JavaScript 标签引入，这里引入的位置在 body 的底部
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue2</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</body>
</html>
1.new Vue
首先在 body 中添加一个 div， id 设置为 app
<div id="app"></div>
在 JavaScript 中 new Vue 实例，并使用它的一些配置和方法
<script> const vm = new Vue({el: "#app",})
</script>
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue学习</title>
</head>
<body><div id="app"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const vm = new Vue({el: '#app',});
</script>
</html>
2.使用 vue 的特性：
2.1插值表达式和响应式数据
当我们想要修改页面的内容，如果使用 JavaScript 那么就会使用 Dom 操作，但是这很繁琐， vue 框架提供给我们一种给便利简洁的方式。
那就是我们在 vue 实例内部声明响应式数据
在 html 中使用插值表达式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue学习</title>
</head>
<body>
<div id="app"><div>{{title}}</div><div>{{message}}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '这是一个标题',message: '这是内容',}}});
</script>
</html>
这是页面效果，如果我们需要修改数据，直接修改响应式数据，页面会自动更新数据，这是一个数据的单向绑定
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>vue学习</title></head><body><div id="app"><div>{{title}}</div><div>{{message}}</div></div></body><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '一个标题',message: '这是内容',}}});</script>
</html>
2.2methods 属性
这个属性，其实就是我们的函数方法，这里面可以写很多个函数，这个属性中可以使用 this.响应式数据 的方式访问修改我们定义的响应式数据，并且也可以使用插值表达式的方式使用这个函数
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>vue学习</title></head><body><div id="app"><div>{{title}}</div><div>{{message}}</div><div>{{output()}}</div></div></body><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '一个标题',message: '这是内容',}},methods: {output() {return '这是一个output方法'+ this.message;}}});</script>
</html>
当然你也可以在 output 下方添加更多的同级函数，注意需要写在 methods 内
2.3计算属性：具有缓存性 computed
它的作用是，当写在内部的函数多次的结果都是一样的话，只会执行第一次运算，会把最后的结果缓存在一个地方，只要是发现没有变化，就会一直使用之前的结果。
也就是说，写在这内部的函数，调用次数越多，越节约计算成本，性能越好
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue学习</title>
</head>
<body>
<div id="app"><div>{{title}}</div><div>{{message}}</div><div>{{output()}}</div><div>{{outputContent}}</div><div>{{outputContent}}</div><div>{{outputContent}}</div><div>{{outputContent}}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '一个标题',message: '这是内容',}},methods: {output() {return '这是一个output方法'+ this.message;}},computed: {outputContent () {console.log('计算属性被调用了');return '这是一个计算属性'+this.title;}}});
</script>
</html>
注意看这里的写法，它是一个属性，所以我调用的时候，是不用加括号的
这里可以看见，我们调用了多次计算属性，但是只计算了一次，从控制台能够看见
2.4侦听器
这是一个监测我们的响应式的数据有没有发生改变，如果发生改变，可以允许我们做一些操作
比如说，我们在 methods 中添加一个函数修改 title 的内容为 嘿嘿嘿，在使用我们的侦听器。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>vue学习</title></head><body><div id="app"><div>{{title}}</div><div>{{message}}</div><div>{{output()}}</div><!-- <div>{{outputContent}}</div>--><!-- <div>{{outputContent}}</div>--><!-- <div>{{outputContent}}</div>--><!-- <div>{{outputContent}}</div>--><div>{{testWatchTitle()}}</div></div></body><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '标题',message: '这是内容',}},methods: {output() {return '这是一个output方法'+ this.message;},testWatchTitle() {this.title = '嘿嘿嘿';}},computed: {outputContent () {console.log('计算属性被调用了');return '这是一个计算属性'+this.title;}},watch: {title: function (newVal, oldVal) {console.log('title发生了变化', newVal, oldVal);}}});</script>
</html>
这里会发现，内部的输出在控制台上有了，这也就是说，我们可以在改变响应式数据的同时，去做一些操作。
2.5指令
v-text v-html
<p v-text="htmlContent"></p>
<p v-html="htmlContent"></p>
大家会发现这两个指令可以用来渲染 text 内容， v-html 则是可以渲染 html 页面内容
v-for
为了逻辑清晰我把以前的代码全部注释掉
并且使用 v-for 渲染五个嘿嘿嘿
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue学习</title>
</head>
<body>
<div id="app">
<!-- <div>{{title}}</div>-->
<!-- <div>{{message}}</div>-->
<!-- <div>{{output()}}</div>-->
<!-- <div>{{outputContent}}</div>-->
<!-- <div>{{outputContent}}</div>-->
<!-- <div>{{outputContent}}</div>-->
<!-- <div>{{outputContent}}</div>-->
<!-- <div>{{testWatchTitle()}}</div>--><p v-text="htmlContent"></p><p v-html="htmlContent"></p><div v-for="item in 5">嘿嘿嘿</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '标题',message: '这是内容',htmlContent: '<h1>我是h1</h1>',}},methods: {output() {return '这是一个output方法'+ this.message;},testWatchTitle() {this.title = '嘿嘿嘿';}},computed: {outputContent () {console.log('计算属性被调用了');return '这是一个计算属性'+this.title;}},watch: {title: function (newVal, oldVal) {console.log('title发生了变化', newVal, oldVal);}}});
</script>
</html>
这是一个循环渲染
当然我们可以拿来渲染数组或者对象：
v-if v-show
v-if： 会根据条件重新渲染在 Dom
v-show ： 一直都存在 Dom， 会根据条件设置样式 display： none
发现没有 v-if
这里是 v-show
发现只是隐藏了
所以这里得出一个重要结论，如果我们的需求是不停的来回切换显示状态，我们最好使用 v-show，因为这样可以避免多次重复 dom 创建销毁带来的损耗
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue学习</title>
</head>
<body>
<div id="app">
<!-- <div>{{title}}</div>-->
<!-- <div>{{message}}</div>-->
<!-- <div>{{output()}}</div>-->
<!-- <div>{{outputContent}}</div>-->
<!-- <div>{{outputContent}}</div>-->
<!-- <div>{{outputContent}}</div>-->
<!-- <div>{{outputContent}}</div>-->
<!-- <div>{{testWatchTitle()}}</div>--><p v-text="htmlContent"></p><p v-html="htmlContent"></p><!-- <div v-for="item in arr">{{item}}</div>--><div v-for="(item, key, index) in obj">{{item, key, index}}</div><div v-show="false">heihei</div><!-- 属性指令-->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '标题',message: '这是内容',htmlContent: '<h1>我是h1</h1>',arr:['a', 'b', 'c'],obj:{name:'张三',age:18},falg: true,}},methods: {output() {return '这是一个output方法'+ this.message;},testWatchTitle() {this.title = '嘿嘿嘿';}},computed: {outputContent () {console.log('计算属性被调用了');return '这是一个计算属性'+this.title;}},watch: {title: function (newVal, oldVal) {console.log('title发生了变化', newVal, oldVal);}}});
</script>
</html>
v-bind
可以简写：
事件指令 v-on
<button v-on:click="output">按钮</button><button @click="output">按钮</button>
可以简写为 @Click
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue学习</title>
</head>
<body>
<div id="app">
<!-- <div>{{title}}</div>-->
<!-- <div>{{message}}</div>-->
<!-- <div>{{output()}}</div>-->
<!-- <div>{{outputContent}}</div>-->
<!-- <div>{{outputContent}}</div>-->
<!-- <div>{{outputContent}}</div>-->
<!-- <div>{{outputContent}}</div>-->
<!-- <div>{{testWatchTitle()}}</div>--><p v-text="htmlContent"></p><p v-html="htmlContent"></p><!-- <div v-for="item in arr">{{item}}</div>--><div v-for="(item, key, index) in obj">{{item, key, index}}</div><div v-show="false">heihei</div>
<!-- 数据绑定--><div v-bind:title="title">这是内容</div><div :title="title">这是内容</div><button v-on:click="output">按钮</button><button @click="output">按钮</button>
<!-- 属性指令-->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const vm = new Vue({el: '#app',//1.响应式数据和插值表达式data() {return {title: '标题',message: '这是内容',htmlContent: '<h1>我是h1</h1>',arr:['a', 'b', 'c'],obj:{name:'张三',age:18},falg: true,}},methods: {output() {console.log('按钮被点击了');return '这是一个output方法'+ this.message;},testWatchTitle() {this.title = '嘿嘿嘿';}},computed: {outputContent () {console.log('计算属性被调用了');return '这是一个计算属性'+this.title;}},watch: {title: function (newVal, oldVal) {console.log('title发生了变化', newVal, oldVal);}}});
</script>
</html>
v-model
这是input输入框独有的，实现数据双向绑定
<input type="text" v-model="inputValue"><div>{{inputValue}}</div>
2.6修饰符
v-model.trim
<input type="text" v-model.trim="inputValue">
<div>{{inputValue}}</div>
这是用来清除输入框两侧的空格
同样这样的修饰符还有很多 vue 中，有关于键盘事件的等等
专栏文章：
1.vue2入门（1）vue核心语法详解复习笔记
2.vue笔记2 组件通信props $emit 组件插槽 slot 使用详细解释