Vue
Vue
Hallo Vue
<body>
<div id="app">{{message}}</div>
</body>
<script>
//let(定义变量)/const(定义常量)
const app = new Vue({
el: '#app', //用于挂载要管理的元素
data: { //定义数据
message: 'Hello Vue!'
}
})
</script>vue的列表展示(v-for)
<body>
<div id="app">
<ul>
<li v-for="item in movies">
{{item}}
</li>
</ul>
</div>
</body>
<script>
const app = new Vue({
el: '#app',
data: {
movies: ['星际穿越', '盗梦空间', '大话西游']
}
})
app.movies.push('闻香识女人');
</script>实现：
- 星际穿越
- 盗梦空间
- 大话西游
- 闻香识女人
计数器(v-on监听,"v-on:"可用@代替称为语法糖)
<body> <div id="app"> <h2>当前计数：{{counter}}</h2> <button @click="counter++">+</button> <button @click="counter--">-</button> </div> </body> <script> const app = new Vue({ el: '#app', data: { counter: 0 } }) </script><body> <div id="app"> <h2>当前计数：{{counter}}</h2> <!--<button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button>--> <button @click="add">+</button> <button @click="sub">-</button> </div> </body> <script> const app = new Vue({ el: '#app', data: { counter: 0 }, methods: { add: function(){ this.conter++ }, sub: function(){ this.conter-- } } }) </script>
02-插值操作
插值操作-mustache语法（{{massage}}）
<body>
<h2>{{message}}</h2>
<h2>{{message}}，ABC</h2>
<!--在mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
<h2>{{firstname + lastname}}</h2>
<h2>{{firstname + ' ' + lastname}}</h2>
<h2>{{firstname}} {{lastname}}</h2>
<h2>{{counter * 2}}</h2>
</body>
<script>
//let(定义变量)/const(定义常量)
const app = new Vue({
el: '#app', //用于挂载要管理的元素
data: { //定义数据
message: 'Hello Vue!',
firstname: 'kobe',
lastname: 'bryant',
counter: 100
}
})
</script>v-once——只执行一次
- 该指令后面不需要跟任何表达式
- 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变
<body>
<div id="app">
<h2 v-once>{{massage}}</h2>
<!--massage改变时，界面并没有重新渲染-->
</div>
</body>v-html——解析html指令
- 该指令后面往往会跟上一个string类型
- 会将string的html解析出来并且进行渲染
<body>
<div id="app">
<h2 v-html="url"></h2>
</div>
<script>
const app = new vue({
el: '#app',
data: {
url: '<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
</body>v-text——与mustache相似
- 接受一个string类型
- 覆盖当前文本
<body>
<div id="app">
<h2 v-text="message"></h2>
<!--等于<h2>{{message}}</h2>-->
</div>
<script>
const app = new vue({
el: '#app',
data: {
message: 'Azhang'
}
})
</script>
</body>v-pre——用于跳过这个元素和它子元素的编译过程，用于显示原本的mustache语法
<body>
<div id="app">
<h2 v-pre>{{message}}</h2>
<!--直接显示'{{message}}'-->
</div>
<script>
const app = new vue({
el: '#app',
data: {
message: 'Azhang'
}
})
</script>
</body>v-cloak
<style>
[v-cloak]{
display: none;
}
//给带有v-cloak属性的元素附上该css属性
</style>
<body>
<div id="app" v-cloak>
{{message}}
<!--1s后显示'Azhang'-->
</div>
<script>
//在vue解析之前，div中有一个属性叫v-cloak
//在vue解析之后，div中没有一个属性叫v-cloak
steTimeout(function(){
const app = new vue({
el: '#app',
data: {
message: 'Azhang'
}
})
}, 1000)
</script>
</body>03-动态绑定属性
v-bind——动态绑定属性
<body>
<div id="app">
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHref">百度一下</a>
<!--语法糖“:” <img :src="imgURL" alt="">
<a :href="aHref">百度一下</a>-->
</div>
<script>
const app = new vue({
el: '#app',
data: {
imgURL: '图片地址',
aHref: 'http://www.baidu.com'
}
})
</script>
</body>v-bind——动态绑定class（对象语法）
<style>
.active{
color: red;
}
</style>
<body>
<div id="app">
用法1：
<!--<h2 class="active">{{message}}</h2>-->
<!--<h2 :class="active">{{message}}</h2>-->
用法2：
<!--<h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2>-->
<!--<h2 v-bind:class="{类名1: Boolean, 类名2: Boolean}">{{message}}</h2>-->
<!--当Boolean值为true时，该类名会被赋上该标签的class属性-->
<!--<h2 v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>-->
用法3：
<!--<h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>-->
<!--不冲突 直接合并-->
用法4：
<h2 v-bind:class="getClasses()">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script>
const app = new vue({
el: '#app',
data: {
message: 'Azhang',
isActive: true,
isLine: true
},
methods: {
btnClick: function(){
this.isActive = !this.isActive
},
getClasses: function(){
return {active: this.isActive, line: this.isLine}
}
}
})
</script>
</body>v-bind——动态绑定class（数组语法） ’用的少‘
<body>
<div id="app">
<!--<h2 v-bind:class="['active', 'line']">{{message}}</h2>-->
<h2 v-bind:class="[active, line]">{{message}}</h2>
</div>
<script>
const app = new vue({
el: '#app',
data: {
message: 'Azhang',
active: 'aaaaa',
line: 'bbbbbb'
}
})
</script>
</body>v-bind——动态绑定style（对象语法）
<body>
<div id="app">
<!--<h2 v-bind:style="{fontSize: '50px'}">{{message}}</h2>-->
<!--css属性名需用驼峰表示法或者使用font-size表示,属性值若不是变量需用单引号括住-->
<!--<h2 v-bind:style="{fontSize: finalSize}">{{message}}</h2>-->
<!--<h2 v-bind:style="{fontSize: finalSize + 'px'}">{{message}}</h2>-->
<!--<h2 v-bind:style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2>-->
<h2 v-bind:style="getStyles()">{{message}}</h2>
</div>
<script>
const app = new vue({
el: '#app',
data: {
message: 'Azhang',
// finalSize: '100px'
finalSize: 100,
finalColor: 'red'
},
methods: {
getStyles: function(){
return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
}
}
})
</script>
</body>v-bind——动态绑定style（数组语法）'用的少'
<body>
<div id="app">
<h2 v-bind:style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>
<script>
const app = new vue({
el: '#app',
data: {
message: 'Azhang',
baseStyle: {backgroundColor: 'red'},
baseStyle1: {fontSize: '100px'}
}
})
</script>
</body>04-计算属性
计算属性的基本使用
<body>
<div id="app">
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{fullName}}</h2>
</div>
<script>
const app = new vue({
el: '#app',
data: {
firstName: 'Lebron',
lastName: 'James'
},
computed: {
fullName: function(){
return this.firstName + ' ' + this.lastName
}
},
methods: {
getFullName(){
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>计算属性的复杂操作
<body>
<div id="app">
<h2>总价格：{{totalPrice}}</h2>
</div>
<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 = 0
for(let i=0, i<this.books.length; i++){
result += books[i].price
}
return result
//for(let i in this.books){
// this.books[i]
//}
//for(let book of this.books){
//
//}
}
}
})
</script>
</body>计算属性的setter和getter
<body>
<div id="app">
<h2>总价格：{{totalPrice}}</h2>
</div>
<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
}
}
//但是一般情况下没有set方法，所以get也可以直接省略写成之前那样
//set方法使用时需要有参数
fullName: {
set: function(newValue){
//这个newValue是该计算属性被调用时所传进来的参数
}
get: function(){
return this.firstName + ' ' + this.lastName
}
}
}
})
</script>
</body>