文章目录

导言
一、01-初体验
- 1. ch01_helloworld.html
- 2. ==v-for指令==：ch02_vue列表展示_v-for.html
- 3. ==v-on指令==：ch03.1_vue案例_计数器_v-on.html
- 4. 介绍MVVM、方法和函数
- 5. ch04_template.html
二、02-插值表达式、指令
- 1. =={{}}==：01-Mustache语法-插值表达式.html
- 2. ==v-html指令==：02-v-once指令.html
- 3. ==v-html指令==：03-v-html指令.html
- 4. ==v-text指令==：04-v-text指令.html
- 5. ==v-pre指令==：05-v-pre指令.html
- 6. ==v-cloak指令==：06-v-cloak指令.html
三、==v-bind指令==:03-动态绑定属性
- 1. 01-v-bind的基本使用.html
- 2. 02-v-bind动态绑定class(对象语法).html
- 3. 03-v-bind动态绑定class(数组语法).html
- 4. 04-作业(v-for和v-bind的结合).html
- 5. 05-v-bind动态绑定style(对象语法).html
- 6. 06-v-bind动态绑定style(数组语法).html
四、==computed属性==：04-计算属性
- 1. 01-计算属性的基本使用.html
- 2. 02-计算属性的复杂操作.html
- 3. 03-计算属性的setter和getter.html
- 4. 04-计算属性和methods的对比.html

导言

一、01-初体验

1. ch01_helloworld.html

vue 的第一个hello world。

元素 js 的做法（编程范式：命令式编程）
1. 创建div元素，设置 id 属性
2. 定义一个变量叫 message
3. 将message变量（通过插值表达式）放在前面的div元素中显示
4. 修改message的数据：今天天气不错
5. 将修改后的数据再次替换到div元素
知识点：
1. let（变量） const（常量）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hello vue</title><script src="../../lib/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
</body>
<script>// let（变量） const（常量）// 编程范式：声明式编程const app = new Vue({el: '#app', // 用于挂载要管理的元素data: {     // 定义数据message: 'Hello Vue!'}})
</script>
</html>

2. v-for指令：ch02_vue列表展示_v-for.html

v-for指令：循环遍历。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue列表展示</title><script src="../../lib/vue.js"></script>
</head>
<body>
<div id="app"><ul><li>{{movies[0]}}</li><li>{{movies[1]}}</li><li>{{movies[2]}}</li><li>{{movies[3]}}</li></ul><br><ul><li v-for="item in movies" >{{item}}</li></ul>
</div>
</body>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']}})
</script>
</html>

3. v-on指令：ch03.1_vue案例_计数器_v-on.html

v-on指令：点击指令，等价于 @
可以直接写函数内容，也可以直接写函数名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue案列-计数器</title><script src="../../lib/vue.js"></script>
</head>
<body>
<div id="app"><h2>当前技术： {{counter}}</h2><!-- v-on指令 等价于 @--><button v-on:click="counter++">+</button><button @click="counter--">-</button><button v-on:click="counter++">+</button><button @click="counter--">-</button><button v-on:click="add">+</button><button v-on:click="subtract">-</button>
</div>
</body>
<script>const app = new Vue({el: '#app',data: {counter: 0},methods: {add: function () {this.counter++;console.log('add 被执行')},subtract: function () {this.counter--;console.log('subtract 被执行')}}})
</script>
</html>

4. 介绍MVVM、方法和函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--
MVVM： vue就是一个MVVM框架， M：model 就是 data里的数据，v: view 就是 HTML代码， VM ：就是vue实例开发中什么时候称之为方法，什么时候称之为函数呢？
方法：method
函数：functionjs 中 定义 function abs(){} 为 函数
js 在 在定义类中 function Person{} 中定义的为 方法
一般  方法 是和某个实例对象挂钩的。有时候 方法和函数也是等价的。所以：
methods 中定义的 是方法-->
</body>
</html>

5. ch04_template.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>template</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {},methods: {}})
</script>"
</html>

二、02-插值表达式、指令

1. {{}}：01-Mustache语法-插值表达式.html

mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mustache 插值表达式</title>
</head>
<body>
<div id="app"><h2>{{message}}</h2><h2>{{message}}, 李银河!</h2><!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式--><h2>{{firstName + lastName}}</h2><h2>{{firstName + ' ' + lastName}}</h2><h2>{{firstName}} {{lastName}}</h2><h2>{{counter * 2}}</h2>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',firstName: 'kobe',lastName: 'bryant',counter: 100},methods: {}})
</script>
</html>

2. v-html指令：02-v-once指令.html

当在浏览器开发者工具的 console 控制台，输入 app.message='哈哈哈'，上面改变，下面不改变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-on</title>
</head>
<body>
<div id="app"><h2>{{message}}</h2><!--当在浏览器开发者工具的 console 控制台，输入 app.message='哈哈哈'， 上面改变，下面不改变--><h2 v-once>{{message}}</h2>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'},methods: {}})
</script>
</html>

3. v-html指令：03-v-html指令.html

插入 html 片段

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-html</title>
</head>
<body><div id="app"><h2>{{url}}</h2><h2 v-html="url"></h2>
</div><script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',url: '<a href="http://www.baidu.com">百度一下</a>'}})
</script></body>
</html>

4. v-text指令：04-v-text指令.html

输出文本

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-text</title>
</head>
<body><div id="app"><h2>{{message}}, 李银河!</h2><h2 v-text="message">, 李银河!</h2>
</div><script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'}})
</script></body>
</html>

5. v-pre指令：05-v-pre指令.html

展示死数据，是啥就显示啥

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-pre</title>
</head>
<body><div id="app"><h2>{{message}}</h2><!--直接显示 内容，不取model 里面的数据：{{message}}--><h2 v-pre>{{message}}</h2>
</div><script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'}})
</script></body>
</html>

6. v-cloak指令：06-v-cloak指令.html

v-cloak作用：

如果不加的话，如js中延迟一秒（模拟网络延迟），则会先显示 {{message}} 一秒钟，然后显示：你好啊，
如果加了 v-cloak，并加上上面的样式，则一秒内什么都不显示，一秒后显示：你好啊

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-cloak</title><style>[v-cloak] {display: none;}</style>
</head>
<body>
<!--v-cloak作用：如果不加的话，如js中延迟一秒（模拟网络延迟），则会先显示 {{message}} 一秒钟，然后显示：你好啊，如果加了 v-cloak，并加上上面的 样式，则一秒内什么都不显示，一秒后显示：你好啊-->
<div id="app" v-cloak><h2>{{message}}</h2>
</div><script src="../../lib/vue.js"></script>
<script>// 在vue解析之前, div中有一个属性v-cloak// 在vue解析之后, div中没有一个属性v-cloaksetTimeout(function () {const app = new Vue({el: '#app',data: {message: '你好啊'}})}, 1000)
</script></body>
</html>

三、v-bind指令:03-动态绑定属性

1. 01-v-bind的基本使用.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-bind 和 冒号</title>
</head>
<body><div id="app"><!-- 错误的做法: 这里不可以使用mustache语法--><!--<image src="{{imgURL}}" alt="">--><!-- 正确的做法: 使用v-bind指令 --><img v-bind:src="imgURL" alt="" ></img><a v-bind:href="aHref">百度一下</a><br><!--语法糖的写法--><img :src="imgURL" alt="" ></img><a :href="aHref">百度一下</a>
</div><script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',imgURL: 'https://img11.360buyimg.com/mobilecms/s350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/74fc2f84e53a9c23.jpg!q90!cc_350x250.webp',aHref: 'http://www.baidu.com'}})
</script></body>
</html>

2. 02-v-bind动态绑定class(对象语法).html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-bind动态绑定class(对象语法)</title><style>.active {color: red;}</style>
</head>
<body><div id="app"><h1>这两个普通写法</h1><h2 class="active">{{message}}</h2><h2 :class="active">{{message}}</h2><h1>对象的形式 写入</h1><!-- <h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2> --><!-- <h2 v-bind:class="{类名1: true, 类名2: boolean}">{{message}}</h2> --><h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2><h2 class="title" v-bind:class="getClasses()">{{message}}</h2><button v-on:click="btnClick">按钮</button>
</div><script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',isActive: true,isLine: true},methods: {btnClick: function () {this.isActive = !this.isActive},getClasses: function () {return {active: this.isActive, line: this.isLine}}}})
</script></body>
</html>

3. 03-v-bind动态绑定class(数组语法).html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-bind动态绑定class(数组语法)</title><style>.aaaaaa {color: red;}.bbbbbbb {font-size: 50px;}</style>
</head>
<body><div id="app"><h2 class="title" :class="[active, line]">{{message}}</h2><h2 class="title" :class="getClasses()">{{message}}</h2>
</div><script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',active: 'aaaaaa',line: 'bbbbbbb'},methods: {getClasses: function () {return [this.active, this.line]}}})
</script></body>
</html>

4. 04-作业(v-for和v-bind的结合).html

作业需求: 点击列表中的哪一项, 那么该项的文字变成红色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>作业(v-for和v-bind的结合)</title><style>.active{color: red;}</style>
</head>
<body>
<h1>作业需求: 点击列表中的哪一项, 那么该项的文字变成红色</h1>
<div id="app"><ul><!--<li v-for="m in movies">{{m}}</li>--><li v-for="(m, index) in movies" @click="change(index)" :class="{active: currentIndex === index}">{{index}}-{{m}}</li></ul>
</div><script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人'],currentIndex: 0},methods: {change: function (index) {this.currentIndex = index}}})
</script></body>
</html>

5. 05-v-bind动态绑定style(对象语法).html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-bind动态绑定style(对象语法)</title>
</head>
<body><div id="app"><!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>--><!--'50px'必须加上单引号, 否则是当做一个变量去解析--><h2 :style="{fontSize: '50px'}">{{message}}</h2><!--finalSize当成一个变量使用--><h2 :style="{fontSize: finalSize}">{{message}}</h2><h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2><h2 :style="getStyles()">{{message}}</h2>
</div></body>
<script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',finalSize: 100,finalColor: 'red',},methods: {getStyles: function () {return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}}}})
</script>
</html>

6. 06-v-bind动态绑定style(数组语法).html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>bind动态绑定style(数组语法)</title>
</head>
<body><div id="app"><h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div><script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',baseStyle: {backgroundColor: 'red'},baseStyle1: {fontSize: '100px'},}})
</script></body>
</html>

四、computed属性：04-计算属性

1. 01-计算属性的基本使用.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>01-计算属性的基本使用</title>
</head>
<body><div id="app"><h2>{{firstName + ' ' + lastName}}</h2><h2>{{firstName}} {{lastName}}</h2><h2>{{getFullName()}}</h2><h2>{{fullName}}</h2>
</div><script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {firstName: 'Lebron',lastName: 'James'},// computed: 计算属性()computed: {fullName: function () {return this.firstName + ' ' + this.lastName}},methods: {getFullName() {return this.firstName + ' ' + this.lastName}}})
</script></body>
</html>

2. 02-计算属性的复杂操作.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>02-计算属性的复杂操作</title>
</head>
<body><div id="app"><h2>总价格: {{totalPrice}}</h2>
</div><script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {books: [{id: 110, name: 'Unix编程艺术', price: 119},{id: 111, name: '代码大全', price: 105},{id: 112, name: '深入理解计算机原理', price: 98},{id: 113, name: '现代操作系统', price: 87},]},computed: {totalPrice: function () {let result = 0for (let i=0; i < this.books.length; i++) {result += this.books[i].price}return result// for (let i in this.books) {//   this.books[i]// }//// for (let book of this.books) {//// }}}})
</script></body>
</html>

3. 03-计算属性的setter和getter.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>03-计算属性的setter和getter</title>
</head>
<body><div id="app"><h2>{{fullName}}</h2>
</div><script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {firstName: 'Kobe',lastName: 'Bryant'},computed: {/** 这是计算属性的 简写方式* */// fullName: function () {//   return this.firstName + ' ' + this.lastName// }/** 这是计算属性的原始写法* */// name: 'coderwhy'// 计算属性一般是没有set方法, 只读属性.fullName: {set: function(newValue) {// console.log('-----', newValue);const names = newValue.split(' ');this.firstName = names[0];this.lastName = names[1];},get: function () {return this.firstName + ' ' + this.lastName}},// fullName: function () {//   return this.firstName + ' ' + this.lastName// }}})
</script></body>
</html>

4. 04-计算属性和methods的对比.html

methods 会执行 4 次
computed 会执行 1 次，其效率会高于 methods

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>04-计算属性和methods的对比</title>
</head>
<body><div id="app"><h1>1.直接拼接: 语法过于繁琐</h1><h5>{{firstName}} {{lastName}}</h5><h1>2.通过定义 methods</h1><h5>{{getFullName()}}</h5><h5>{{getFullName()}}</h5><h5>{{getFullName()}}</h5><h5>{{getFullName()}}</h5><h1>3.通过 computed</h1><h5>{{fullName}}</h5><h5>{{fullName}}</h5><h5>{{fullName}}</h5><h5>{{fullName}}</h5><!--methods 会执行 4 次computed 会执行 1 次， 其效率会高于 methods-->
</div><script src="../../lib/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {firstName: 'Kobe',lastName: 'Bryant'},methods: {getFullName: function () {console.log('getFullName');return this.firstName + ' ' + this.lastName}},computed: {fullName: function () {console.log('fullName');return this.firstName + ' ' + this.lastName}}})</script></body>
</html>

VUE学习一：初识VUE、指令、动态绑定、计算属性相关推荐

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch...
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
【15】Vue：02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性表单基本操作表单修饰符自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令带参数自定义指令局部指令计算属性 c ...
【Vue学习笔记_03】v-bind动态绑定属性
[Vue学习笔记_03]v-bind动态绑定属性 v-bind基本使用 v-bind动态绑定class 对象语法(很常用) 数组语法 v-bind动态绑定style 对象语法数组语法配套可执行代码 ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
Vue.js学习笔记—shop-bus:实战：利用计算属性、指令等知识开发购物车
参考<Vue,js>实战(梁灏编著) shop-bus:实战:利用计算属性.指令等知识开发购物车 git代码地址 index.html <!DOCTYPE html> < ...
vue使用,及指令介绍,计算属性/过滤器
目录 Vue是什么 vue的单页面原理 Vue的使用指令介绍: v-if和 v-show的区别 v-on 事件绑定: v-bind 绑定属性处理数组绑定 v-model双向数据绑定 created ...
Vue.js学习系列（二十七）-- 计算属性（一）
2019独角兽企业重金招聘Python工程师标准>>> 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
阿瑶的vue学习笔记(1)Vue核心
1. Vue核心 1.1. Vue简介 1.1.1. 官网英文官网中文官网 1.1.2. 介绍与描述动态构建用户界面的渐进式JavaScript框架作者:尤雨溪 1.1.3. Vue的特点遵 ...

VUE学习一：初识VUE、指令、动态绑定、计算属性

文章目录

导言

一、01-初体验

1. ch01_helloworld.html

2. v-for指令：ch02_vue列表展示_v-for.html

3. v-on指令：ch03.1_vue案例_计数器_v-on.html

4. 介绍MVVM、方法和函数

5. ch04_template.html

二、02-插值表达式、指令

1. {{}}：01-Mustache语法-插值表达式.html

2. v-html指令：02-v-once指令.html

3. v-html指令：03-v-html指令.html

4. v-text指令：04-v-text指令.html

5. v-pre指令：05-v-pre指令.html

6. v-cloak指令：06-v-cloak指令.html

三、v-bind指令:03-动态绑定属性

1. 01-v-bind的基本使用.html

2. 02-v-bind动态绑定class(对象语法).html

3. 03-v-bind动态绑定class(数组语法).html

4. 04-作业(v-for和v-bind的结合).html

5. 05-v-bind动态绑定style(对象语法).html

6. 06-v-bind动态绑定style(数组语法).html

四、computed属性：04-计算属性

1. 01-计算属性的基本使用.html

2. 02-计算属性的复杂操作.html

3. 03-计算属性的setter和getter.html

4. 04-计算属性和methods的对比.html

VUE学习一：初识VUE、指令、动态绑定、计算属性相关推荐

最新文章

热门文章

VUE学习一：初识VUE、指令、动态绑定、计算属性

文章目录

导言

一、01-初体验

1. ch01_helloworld.html

2. v-for指令：ch02_vue列表展示_v-for.html

3. v-on指令：ch03.1_vue案例_计数器_v-on.html

4. 介绍MVVM、方法 和 函数

5. ch04_template.html

二、02-插值表达式、指令

1. {{}}：01-Mustache语法-插值表达式.html

2. v-html指令：02-v-once指令.html

3. v-html指令：03-v-html指令.html

4. v-text指令：04-v-text指令.html

5. v-pre指令：05-v-pre指令.html

6. v-cloak指令：06-v-cloak指令.html

三、v-bind指令:03-动态绑定属性

1. 01-v-bind的基本使用.html

2. 02-v-bind动态绑定class(对象语法).html

3. 03-v-bind动态绑定class(数组语法).html

4. 04-作业(v-for和v-bind的结合).html

5. 05-v-bind动态绑定style(对象语法).html

6. 06-v-bind动态绑定style(数组语法).html

四、computed属性：04-计算属性

1. 01-计算属性的基本使用.html

2. 02-计算属性的复杂操作.html

3. 03-计算属性的setter和getter.html

4. 04-计算属性和methods的对比.html

VUE学习一：初识VUE、指令、动态绑定、计算属性相关推荐

最新文章

热门文章

4. 介绍MVVM、方法和函数