<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue学习</title>
<style>
[v-cloak]{
display: none;
}
.active{
color: red;
}
</style>
</head>
<body>
<!-- cloak 斗篷，在解析之前会遮住，即是， 在解析vue之前，有v-cloak 属性，解析会，没有v-cloak属性，很少用-->
<div id = ‘demo‘ v-cloak>
<!-- 1、直接引用 mustache 语法-->
<h2> {{msg + ‘, ‘ + msg3}}</h2>
<h2> {{msg}},{{msg3}}</h2>
<h2> {{msg}}</h2>
<!-- v- text 显示文本，会覆盖，不灵活，很少用 -->
<h2 v-text=‘msg‘>家居</h2>
<!-- v-pre 显示原文本，不会解析 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。-->
<h2 v-pre>{{msg}}</h2>
<!-- v-for="item in list" 数组的引用-->
<ul >
<li v-for = "item in list">{{item}}</li>
</ul>
<!-- v-once 固定最先值-->
<h2 v-once>最先数据：{{msg2}}</h2>
<h2>当前数据：{{msg2}}</h2>
<!-- 点击事件及方法,两种写法-->
<button v-on:click = "add()">+</button>
<button @click = "sub()">-</button>
<!-- v-html 解析html标签格式 -->
<h2 v-html=‘url‘></h2>
<!-- v-bind: 绑定元素 , : 语法糖写法-->
<!-- v-bind 绑定class对象语法,键值对-->
<!-- v-bind 绑定class数组-->
<img v-bind:src="imgURL" >
<a v-bind:href=‘aHref‘>百度一下</a>
<img :src="imgURL" >
<a :href=‘aHref‘>百度一下</a>
<h2 class=‘title‘ :class="{active: isActive, line: isLine}">你好呀</h2>
<h2 class=‘title‘ :class="getClass()">你好呀</h2>
<button @click = "colorB()">切换颜色</button>
<!-- :style="{ 属性名: ‘属性值‘}" 属性值要用单括号‘‘包裹起来-->
<h2 :style="{color : ‘blue‘}"> 加油</h2>
<!-- 计算属性的简单运用-->
<h2>{{fullName}}</h2>
<!-- 计算属性的复杂运用-->
<ul>
<!-- {name,price} 显示为 数学 30元 (name,price) 显示为 { "name": "数学", "price": 30 } 0元-->
<!-- 一般数组用（） -->
<li v-for = "{name,price} in books">{{name}} {{price}}元</li>
</ul>
<h2>{{totalPrice}}</h2>
</div>
<div id = ""></div>
</body>
<script src = "../js/vue.js"></script>
<!--<script src = "../js/vue-2.4.0.js"></script>-->
<script>
// <!--const 常量，定义时必须赋值，常量的含义是指向的对象不能修改，但是对象内部的属性可以修改，
// let 变量 -->
const app = new Vue({
<!--id容器#-->
el: ‘#demo‘,
data: {
msg: ‘开始学习vue‘,
msg2: 1,
msg3: ‘加油‘,
list: [‘吴‘,‘李‘,‘赵‘],
url: ‘<a href="http://www.baidu.com">百度一下</a>‘,
imgURL: ‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597120888045&di=95a62638090a9558b88fc9175578fe1b&imgtype=0&src=http%3A%2F%2Fwx4.sinaimg.cn%2Flarge%2F007qCWkUly1ghmjmflp5aj30hs0a014r.jpg‘,
aHref: ‘http://www.baidu.com‘,
isActive: true,
isLine: true,
firstName: ‘li‘,
lastName: ‘ming‘,
books: [
{name: ‘数学‘, price: 30},
{name: ‘语文‘, price: 31},
{name: ‘英语‘, price: 32},
{name: ‘物理‘, price: 33},
]
},
// 计算属性 ，函数名为名词比较好
computed: {
// 计算属性的get与1set方法，get方法与下面fullName 方法一致，一般只写get方法，所以用下面的简洁方法
// fullName: {
// get: function(){
// return this.firstName + ‘ ‘ + this.lastName
// },
// set: function(newValue){
// const names = newValue.split(‘ ‘);
// this.firstName = names[0];
// this.lastName = names[1];
// },
// },
fullName: function () {
return this.firstName + ‘ ‘ + this.lastName
},
totalPrice: function () {
let result = 0;
// 三种遍历数组方式
for(let i = 0; i < this.books.length; i++){
result += this.books[i].price
}
// for(let i in this.books){
// result += this.books[i].price
// }
// for(let book of this.books){
// result += book.price
// }
return result
}
},
methods: {
// 方法
add: function () {
this.msg2++
},
sub: function () {
this.msg2--
},
colorB: function () {
this.isActive = !this.isActive
},
getClass: function () {
return {active: this.isActive, line: this.isLine}
}
}
})
</script>
</html>
原文：https://www.cnblogs.com/chunying/p/13543290.html