Vue 基础语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js</title>
<script src="https://unpkg.com/vue"></script>
<style>
.content {
float: left;
width: auto;
height: auto;
padding: 5px;
border: 1px solid red;
margin: 5px;
}
.stopMoving {
border: 1px solid #333;
padding: 5px;
}
.dynamicClass {
background: red;
display: inline-block;
padding: 10px;
color: #fff;
margin: 10px 0;
}
.changeColor span {
background: green;
}
.changeLength span:after {
content: "length";
margin-left: 10px;
}
#canvas {
width: 400px;
padding: 100px 20px;
text-align: center;
border: 1px solid #999999;
}
</style>
</head>
<body>
<div class='content' id="vue-app">
<div class='content'>
<h1>属性绑定</h1>
<!-- 获取name属性值 -->
<h3>Name:{{name}}</h3>
<!-- 获取job属性值 -->
<h3>Job:{{job}}</h3>
<!-- 调用greet方法并绑定返回值。 -->
<h3>{{greet('afternoon')}}</h3>
<!-- a标签href值的绑定方式。 -->
<a v-bind:href="webside">百度搜索</a>
<!-- 绑定html代码片段。 -->
<p v-html='websideTag'></p>
<!-- input的value值的绑定方式。 -->
<input type="text" name="" id="" v-bind:value='name'>
<h1>双向数据绑定</h1>
<p><label>姓名：</label><input type="text" v-model='name'></p>
<!-- 数据绑定涉及到【+】操作时 变成了 字符串相加的效果 -->
<!-- 数据绑定时所有与属性A、B、age相关的方法都会被执行 -->
<p><label>年龄：</label><input type="text" v-model='age'></p>
<h1>v-if 条件</h1>
<button @click="error = !error">toggle Error</button>
<button @click="success = !success">toggle success</button>
<p v-if='error'>网络连接错误 404</p>
<p v-else-if='success'>网络连接成功 200</p>
<p v-show='error'>网络连接错误 404</p>
<p v-show='success'>网络连接成功 200</p>
</div>
<div class='content'>
<h1>事件</h1>
<!-- dom事件触发，消息处理.调用方法时，如果在{{}}中需要在方法名后加(),无参数的方法可不加。v-on:可以用@代替 -->
<button @click="age++">++</button>
<button @click="subtract(1)">-1</button>
<button v-on:dblclick='add'>+1</button>
<!-- once修饰符只执行一次事件 -->
<button v-on:dblclick.once='subtract(10)'>-10</button>
<p>{{name}} age is {{age}}</p>
<!-- 鼠标事件演示 事件修饰符(阻止事件冒泡)-->
<div id="canvas" v-on:mousemove="updateXY">
<span class='stopMoving' @mousemove='stopMoving'>Stop Moving</span>
- {{x}},{{y}} -
<!-- 事件修饰符阻止事件冒泡 -->
<span class='stopMoving' @mousemove.stop=''>Stop Moving</span>
</div>
<!-- prevent 阻止跳转到百度搜索 -->
<p><a @click.prevent="alert" href="http://www.baidu.com">阻止转到百度搜索</a></p>
<h1>键盘事件</h1>
<p><label>姓名：</label>
<!-- 键值修饰符 ,只有输入atl + enter时才触发事件处理 -->
<input ref='txtName' type="text" @focus='txtNameOnFocus()' @keyup.atl.enter='logName'></p>
<p><label>年龄：</label>
<input ref='txtAge' type="text" @keyup='logAge'></p>
<p><label>您正在输入{{tips}}。姓名：{{name}}，年龄：{{age}}</label></p>
</div>
<div class='content'>
<h1>computed计算属性</h1>
<button @click="a++">Add to A</button>
<button @click="b++">Add to B</button>
<p>A - {{a}}</p>
<p>B - {{b}}</p>
<!-- 数据绑定时所有与属性A、B、age相关的方法都会被执行 -->
<!-- 计算属性调用时不带【()】 -->
<p>Age + A = {{addToA}}</p>
<p>Age + B = {{addToB}}</p>
<p>Age + A = {{addToAA()}}</p>
<p>Age + B = {{addToBB()}}</p>
</div>
<div class='content'>
<h1>动态 CSS Class</h1>
<h3>示例 1</h3>
<div @click="changeColor=!changeColor " v-bind:class="{changeColor:changeColor}">
<span class='dynamicClass'>点击变更class</span>
</div>
<h3>示例 2</h3>
<button @click='changeColor=!changeColor'>Change Class</button>
<button @click='changeLength=!changeLength'>Change Length</button>
<div v-bind:class="compClass">
<span class='dynamicClass'>点击按钮变更class</span>
</div>
</div>
<div class='content'>
<h1>v-for 循环</h1>
<ul>
<li v-for="character in characters">
{{character}}
</li>
</ul>
<ul>
<li v-for="user,idx in users">{{idx +1 }}~{{user.name}}-{{user.age}}</li>
</ul>
<template v-for="user,idx in users">
<h3> {{idx +1 }} - {{user.name}}- </h3>
<p>{{user.age}}</p>
</template>
<template v-for="user,idx in users">
<div v-for ='(val,key) in user' >
<p>{{key}}-{{val}}</p>
</div>
</template>
</div>
</div>
<script>
/*
* el: element 需要获取的元素，操作HTML的根容器。
* data:用户数据的存储。
* methods:定义的方法
*/
//实例化 Vue 对象
new Vue({
el: "#vue-app",
data: {
a: 0,
b: 0,
x: 0,
y: 0,
name: "米斯特吴",
job: "WEB开发",
age: 30,
webside: 'http://wwww.baidu.com',
websideTag: "<a href=http://www.163.com>网易新闻</a>",
tips: "--",
changeColor: false,
changeLength: false,
error: false,
success: false,
characters: ['Mario', 'Luffy', 'Yoshi'],
users: [
{ name: 'Henry', age: 30 },
{ name: 'Bucky', age: 25 },
{ name: 'Emily', age: 18 }],
},
computed: {
addToA: function () {
console.log("Add to A");
return this.a + this.age;
},
addToB: function () {
console.log("Add to B");
return this.b + this.age;
},
compClass: function () {
return {
changeColor: this.changeColor,
changeLength: this.changeLength
}
}
},
methods: {
greet: function (time) {
return 'Good ' + time + "," + this.name + '!';
},
subtract: function (num) {
return this.age -= num;
},
add: function () {
return this.age++;
},
updateXY: function (event) {
console.log(event);
this.x = event.offsetX;
this.y = event.offsetY;
},
stopMoving: function (event) {
// js阻止冒泡事件
event.stopPropagation();
},
alert: function () {
alert('看看是否转到百度搜索？');
},
txtNameOnFocus: function () {
this.tips = "【姓名】"
},
logName: function (e) {
this.name = this.$refs.txtName.value;
console.log(e);
},
logAge: function (e) {
this.tips = "【年龄】";
if (e.key == "Enter") {
this.age = this.$refs.txtAge.value;
console.log(e);
}
},
addToAA: function () {
console.log("Add to A");
return this.a + this.age;
},
addToBB: function () {
console.log("Add to B");
return this.b + this.age;
}
}
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
