参考简书:https://www.jianshu.com/p/94ac8b8b8f6b
说明:工作需要,下面的基本使用,一般用于工作可以了
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<title>vue.js完整实例</title>
</head>
<body>
<!--html-->
<div id="app">
输入您的姓名: <input type="text" v-model="name">
<p>{{ $data | json }}</p>
<p>{{ name }}</p>
<button v-on:click="say">欢迎点击</button>
<button @click="say">欢迎点击</button>
<!--loginStatus为true时会显示的section-->
<section v-if="loginStatus">
输入您的姓名: <input type="text" v-model="name">
<button v-on:click="say">欢迎点击</button>
<button @click="switchLoginStatus">退出登录</button>
</section>
<!--loginStatus为false时会显示的section-->
<section v-if="!loginStatus">
登录用户: <input type="text">
登录密码: <input type="password">
<button @click="switchLoginStatus">登录</button>
</section>
<!--v-for 不带索引-->
<ul>
<li v-for="el in products">
{{ el.name }} - ¥ {{ el. price }} - {{ el. category }}
</li>
</ul>
<!--v-for 带索引-->
<ul>
<li v-for="el in products">
{{ $index }} - {{ el.name }} - ¥ {{ el. price }} - {{ el. category }}
</li>
</ul>
<!--v-for 带索引-->
<ul>
<li v-for="(index,el) in products">
{{ index }} - {{ el.name }} - ¥ {{ el. price }} - {{ el. category }}
</li>
</ul>
<!--计算属性Computed-->
输入一个数字: <input type="text" v-model="value">
<p>计算结果:{{ square }}</p>
输入1~10内的数字: <input type="text" v-model="value">
<p>计算结果:{{ resultMsg }}</p>
</div>
</body>
<!--js-->
<script>
// 创建一个新的Vue实例,并设置挂载点
var V = new Vue({
el: '#app',
data: { // v-model,双向数据绑定
name: '_Appian',
products: [
{name: 'microphone', price: 25, category: 'electronics'},
{name: 'laptop case', price: 15, category: 'accessories'},
{name: 'screen cleaner', price: 17, category: 'accessories'},
{name: 'laptop charger', price: 70, category: 'electronics'},
{name: 'mouse', price: 40, category: 'electronics'},
{name: 'earphones', price: 20, category: 'electronics'},
{name: 'monitor', price: 120, category: 'electronics'}
],
value: null,
randNum: 5//第一次随机数为5
},
computed: { // 计算属性Computed
square: function () {
return this.value * this.value;
},
resultMsg: function () {
if (this.value == this.randNum) {
this.randNum = this.getRandNum(1, 10);
return '你猜对了!';
} else {
this.randNum = this.getRandNum(1, 10);
return '猜错了,再来!';
}
},
},
methods: { // v-on / @click 事件绑定
say: function () {
alert('欢迎' + this.name);
},
switchLoginStatus: function () { // 利用v-if或者v-show进行条件判定
this.loginStatus = !this.loginStatus;
},
getRandNum: function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
});
</script>
</html>