Vue学习（第一天）-阿南达文事网

Vue学习（第一天）

一、快速入门

<div id="app">{{message}}<!-- mastache语法--><h1>{{name}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
//let(变量)/const(常量)
const app = new Vue({el: '#app', //用于挂载要管理的元素data: { //定义数据message: '你好啊，张三！',name: 'coderwhy'}
})
</script>

二、插值操作

2.1 Mustache语法

    <div id="app"><h2>{{message}}</h2><h2>{{message}}李银河</h2><h2>{{firstName + lastName}}</h2><h2>{{firstName +' '+ lastName}}</h2><h2>{{firstName}} {{lastName}}</h2><h2>{{counter*2}}</h2></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: '你好呀！',firstName: 'kobe',lastName: 'bryant',counter: 100}})</script>

2.2 v-once指令

v-once修饰的标签中的值不会随数据的改变而改变

<div id="app"><h2>{{message}}</h2><h2 v-once>{{message}}</h2> <!-- v-once 不会随数据的改变而改变--></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: '你好呀！'}})</script>

2.3 v-html指令

v-html指令将值当作html文本值进行解析

<div id="app"><h2 v-html='url'></h2></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: '你好呀！',url: '<a href = "">百度一下</a>'}})</script>

2.4 v-text指令

v-text指令将会替换标签中原来的内容

<div id="app"><h2>{{message}}中国</h2><h2 v-text="message">中国</h2></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: '你好呀！'}})</script>

2.5 v-pre指令

v-pre指令将不会解析标签中Mustache语法的内容

 <div id="app"><h2>{{message}}</h2><h2 v-pre>{{message}}</h2></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: '你好呀！'}})</script>

2.6 v-cloak指令

v-cloak指令将会使得标签被vue解析之前存在属性v-cloak，在vue解析后将v-cloak属性取消

 <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">[v-cloak]{display: none;}</style>
</head><body><div id="app" v-cloak>{{message}}</div><script src="../js/vue.js"></script><script>//在vue解析之前，div中有一个属性v-cloak//在vue解析之后，div中没有一个属性v-cloaksetTimeout(function(argument) {const app = new Vue({el: '#app',data: {message: '你好呀！'}})},1000)</script>
</body></html>

三、动态绑定属性

3.1 基本使用

    <div id="app"><img v-bind:src="imgURL"><!-- 语法糖 --><a :href="ahURL">名称</a></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: '你好呀！',imgURL: '.jpg.webp',ahURL: ''}})</script>

3.2 动态绑定class

3.2.1对象语法

<div id="app"><!-- <h2 :class="style">{{message}}</h2> --><!-- <h2 v-bind:class="{key1:value1,key2:value2}">{{message}}</h2> --><!-- <h2 v-bind:class="{类名1:boolean,类名2:boolean}">{{message}}</h2> --><h2 class="title" v-bind:class="getClasses()">{{message}}</h2><button v-on:click="alter">变</button></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: '你好呀！',style: 'active',isActive: true,isLine: true},methods: {alter: function() {this.isActive = !this.isActive;},getClasses:function () {return {active:this.isActive,line:this.isLine}}}})</script>

3.2.2 数组语法

<div id="app"><!-- <h2 class="title" :class="['active','line']">{{message}}</h2> --><!-- 不加''是变量--><!-- <h2 class="title" :class="[active,line]">{{message}}</h2> --><h2 class="title" :class="getClasses()">{{message}}</h2></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: '你好呀！',active: 'activeName',line: 'lineName'},methods:{getClasses:function () {return [this.active,this.line];}}})</script>

3.3 动态绑定style

3.3.1 对象语法

    <div id="app"><!-- <h2 v-bind:style="{key(属性名):value(属性值),key:value}">{{message}}</h2> --><h2 v-bind:style="{fontSize:finalFontSize+'px',color:finalFontColor}">{{message}}</h2></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: '你好呀！',finalFontSize: 100,finalFontColor:'red',}})</script>

3.3.2 数组语法

<div id="app"><!-- 对象数组--><h1 v-bind:style="[style]">{{message}}</h1></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: '你好呀！',style: { backgroundColor: 'red', Color: 'black' },}})</script>

上面动态绑定style的对象语法与数组语法本质相同，可能均为对象语法。

3.4 作业

当前有4部电影，初始情况下第一部电影名字体为红色，当点击其他一部电影时，原电影得红色字体颜色变为黑色，现在被点击的电影的字体颜色变为红色

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head>
<style type="text/css">
.active {color: red;
}
</style><body><div id="app"><ul><li v-on:click="setActive(index)" v-bind:class="getActive(index)" v-for="(item,index) in movies">{{item}}</li></ul></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {movies: ['海王', '海尔兄弟', '进击的巨人', '火隐忍者', '喜洋洋'],actives: [],lastIndex: 0,},methods: {initActivies: function() {for (var i = 0; i < this.movies.length; i++) {if (i == 0) {this.actives.push(true);continue;}this.actives.push(false);}},getActive: function(index) {if (this.actives.length == 0) {this.initActivies();}return { active: this.actives[index] }},setActive: function(index) {//修改数组指定位置的值Vue.set(this.actives, this.lastIndex, false);Vue.set(this.actives, index, true);this.lastIndex = index;}}})</script>
</body></html>

四、计算属性

4.1基本使用

类似于方法，但是一般只是用来获取值（也可以设置值），其性能较方法而言高，应为它只执行一次

<div id="app"><h3>{{firstName+' '+lastName}}</h3><h3>{{firstName}} {{lastName}}</h3><h3>{{getFullName()}}</h3><h3>{{fullName}}</h3></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {firstName: 'Lebron',lastName: 'James'},methods: {getFullName: function() {return this.firstName + ' ' + this.lastName;}},//计算属性 不能加()computed: {fullName:function () {return this.firstName + ' ' + this.lastName;}}})</script>

4.2 案例

计算所有书的总价格

<div id="app"><h2>总价格：{{totalPrice}}</h2></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {books: [{ id: 110, name: '计算机组成原理', price: 119 },{ id: 112, name: '操作系统', price: 125 },{ id: 115, name: '数据结构', price: 113 },{ id: 119, name: '计算机网路', price: 189 },]},computed: {totalPrice: function() {let result = 0;// for (let i = this.books.length - 1; i >= 0; i--) {//     result += this.books[i].price;// }//for each写法for (let book of this.books) {result += book.price;}return result;}}})</script>

4.3 计算属性的本质

<div id="app">{{fullName}}</div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {firstName: 'Kobe',lastName: 'Bryant'},computed: {// fullName: function() {//     return this.firstName + ' ' + this.lastName;// }fullName: {set: function() {},get: function() {return this.firstName + ' - ' + this.lastName;}}}})</script>

4.4 计算属性与方法的对比

计算属性的调用不能加()，但是方法得加()，该情况仅限于{{}}语法

 <div id="app"><h2>{{getFullName()}}</h2><!--         <h2>{{getFullName}}</h2> --><!-- <h2>{{fullName()}}</h2> --><h2>{{fullName}}</h2><hr><h2>{{getFullName()}}</h2><h2>{{fullName}}</h2></div><script src="../js/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>

回顾

- 一、快速入门
- 二、插值操作
- - 2.1 Mustache语法
  - 2.2 v-once指令
  - 2.3 v-html指令
  - 2.4 v-text指令
  - 2.5 v-pre指令
  - 2.6 v-cloak指令
- 三、动态绑定属性
- - 3.1 基本使用
  - 3.2 动态绑定class
  - - 3.2.1对象语法
    - 3.2.2 数组语法
  - 3.3 动态绑定style
  - - 3.3.1 对象语法
    - 3.3.2 数组语法
  - 3.4 作业
- 四、计算属性
- - 4.1基本使用
  - 4.2 案例
  - 4.3 计算属性的本质
  - 4.4 计算属性与方法的对比

Vue学习（第一天）

Vue学习（第一天）

一、快速入门

二、插值操作

2.1 Mustache语法

2.2 v-once指令

2.3 v-html指令

2.4 v-text指令

2.5 v-pre指令

2.6 v-cloak指令

三、动态绑定属性

3.1 基本使用

3.2 动态绑定class

3.2.1对象语法

3.2.2 数组语法

3.3 动态绑定style

3.3.1 对象语法

3.3.2 数组语法

3.4 作业

四、计算属性

4.1基本使用

4.2 案例

4.3 计算属性的本质

4.4 计算属性与方法的对比

回顾

发布评论取消回复

最近发表

相关推荐

标签列表

Vue学习（第一天）

Vue学习（第一天）

一、快速入门

二、插值操作

2.1 Mustache语法

2.2 v-once指令

2.3 v-html指令

2.4 v-text指令

2.5 v-pre指令

2.6 v-cloak指令

三、动态绑定属性

3.1 基本使用

3.2 动态绑定class

3.2.1对象语法

3.2.2 数组语法

3.3 动态绑定style

3.3.1 对象语法

3.3.2 数组语法

3.4 作业

四、计算属性

4.1基本使用

4.2 案例

4.3 计算属性的本质

4.4 计算属性与方法的对比

回顾

发布评论 取消回复

最近发表

相关推荐

标签列表

发布评论取消回复