<html lang="en">
<head>
<meta charset="UTF-8">
<title>showtitle>
<script type="text/javascript" src="./release/vue.js">script>
head>
<body>
<div id="msg">
<h1>基础h1>
<input type="text" v-model="message" />
<p>Hello {{message}}p>
<p>{{message.toUpperCase()}}p>
<p v-html="message">p>
<p v-text="message">p>
<p>强制数据绑定p>
<img src="imgURL">
<img v-bind:src="imgURL">
<img :src="imgURL">
<p>绑定监听p>
<button v-on:click="func">test1button>
<button @click="func2('asv')">test2button>
div>
<script type="text/javascript">
var vm = new Vue({
el : '#msg',
data : {
message : 'vue',
imgURL : 'https://cn.vuejs.org/images/dcloud.gif'
},
methods : {
func() {
alert("test is click")
},
func2(content){
alert(content)
}
}
})
script>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>showtitle>
<script type="text/javascript" src="./release/vue.js">script>
head>
<body>
<div id="msg">
<h1>计算属性和监视h1>
姓：<input type="text" placeholder="fist name" v-model="fistName" /><br>
名：<input type="text" placeholder="second name" v-model="secondName" /><br>
姓名1（单向）：<input type="text" placeholder="Full Name1" v-model="FullName1"><br>
姓名2（单向）：<input type="text" placeholder="Full Name2" v-model="FullName2"><br>
姓名2（单向）：<input type="text" placeholder="Full Name3" v-model="FullName3"><br>
姓名3（双向）：<input type="text" placeholder="Full Name4" v-model="FullName4"><br>
{{FullName1}}
{{FullName1}}
{{FullName1}}
div>
<script type="text/javascript">
var vm = new Vue({
el : '#msg',
data : {
fistName : 'A',
secondName : 'B'
},
computed : {
FullName1 () {
return this.fistName + ' ' + this.secondName
},
FullName4 : {
get(){
return this.fistName + ' ' + this.secondName
},
set(newvalue){
var nums = newvalue.split(' ');
this.fistName = nums[0];
this.secondName = nums[1];
}
}
},
watch : {
fistName : function (newValue, oldValue) {
this.FullName2 = newValue + ' ' + this.secondName
}
}
});
vm.$watch('secondName', function (newvalue, oldvalue) {
this.FullName3 = this.fistName + ' ' + newvalue
});
script>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>showtitle>
<script type="text/javascript" src="./release/vue.js">script>
head>
<body>
<h1>class和style的绑定h1>
<div id="msg">
<h2>class的绑定h2>
<p class="cClass" :class="a">绑定的class是字符串p>
<button @click="update1">updatebutton>
<p class="cClass" :class="{aClass : isA, bClass: isB}">绑定的class是一个对象p>
<button @click="update2">updatebutton>
<p :class="['aClass', 'cClass']">绑定的class是一个数组p>
<h1>style的绑定h1>
<p :style="{color:activeColor, fontSize:fontSize + 'px'}">style的绑定{{fontSize}}p>
<button @click="update3">updatebutton>
div>
<script type="text/javascript">
var vm = new Vue({
el : '#msg',
data:{
a : 'aClass',
isA : true,
isB : false,
activeColor : 'red',
fontSize : 45
},
methods : {
update1 () {
if(this.a == 'aClass')
this.a = 'bClass';
else
this.a = 'aClass';
},
update2 () {
this.isA = !this.isA;
this.isB = !this.isB;
},
update3 () {
this.activeColor = 'blue';
this.fontSize -= 5;
}
}
});
script>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>showtitle>
<script type="text/javascript" src="./release/vue.js">script>
<style>
.aClass{
color: red;
}
.bClass{
color: blue;
}
.cClass {
font-size: 40px;
}
style>
head>
<body>
<div id="msg">
<h1>条件渲染h1>
<p v-if="ok">成功了p>
<p v-else>失败了p>
<button @click="ok = !ok ">switchbutton>
<p v-show="ok1">successp>
<p v-show="!ok1">faildp>
<button @click="change()">switchbutton>
div>
<script type="text/javascript">
var vm = new Vue({
el : '#msg',
data : {
ok : false,
ok1 : false
},
methods : {
change(){
this.ok1 = !this.ok1;
}
}
});
script>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>showtitle>
<script type="text/javascript" src="./release/vue.js">script>
head>
<body>
<div id="msg">
<h1>列表渲染h1>
<p>v-for遍历数组p>
<li v-for="(p, index) in persons" :key="index">
{{index}}---{{p.name}}----{{p.age}}---<button @click="deleteP(index)">删除button>----<button @click="updateP1(index, name, age)">更新button>
li>
<input type="text" v-model="name"><input type="text" v-model="age">
<p>v-for遍历对象p>
<ul>
<li v-for="(value, key) in persons[1]" :key="key">
{{key}}:{{value}}
li>
ul>
<input type="text" v-model="search"><br>
<li v-for="(p, index) in filerPersons" :key="index">
{{index}}---{{p.name}}----{{p.age}}---<button @click="deleteP(index)">删除button>----<button @click="updateP1(index, name, age)">更新button>
li><br>
<button @click="setOrderTpe(1)">年龄升序button>
<button @click="setOrderTpe(2)">年龄降序button>
<button @click="setOrderTpe(0)">默认排序button>
div>
<script type="text/javascript">
var vm = new Vue({
el : '#msg',
data : {
name : '',
age : '',
search : '',
orderTpe : 0,
persons : [
{name:'Tom0', age:18},
{name:'Tom1', age:17},
{name:'Tom2', age:16},
{name:'Tom3', age:19},
{name:'Tom4', age:14}
],
},
methods : {
deleteP(index) {
this.persons.splice(index, 1);
},
updateP(index, name, age) {
obj = {};
obj.name = name;
obj.age = age;
this.persons[index] = obj;
},
updateP1(index, name, age){
obj = {}
obj.name = name;
obj.age = age;
this.persons.splice(index, 1, obj);
},
setOrderTpe(OrderType){
this.orderTpe = OrderType;
}
},
computed : {
filerPersons() {
var {search, persons, orderTpe} = this;
var list;
list = persons.filter(p => (p.name.indexOf(search) != -1));
if(orderTpe != 0){
list.sort(function (p1, p2) {
if(orderTpe == 1)
return p2.age - p1.age;
else
return p1.age - p2.age;
})
}
return list;
}
}
});
script>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>showtitle>
<script type="text/javascript" src="./release/vue.js">script>
head>
<body>
<div id="msg">
<h1>绑定监听h1>
<button v-on:click="test1">test1button>
<button v-on:click="test2('the passage')">test2button>
<button v-on:click="test3($event)">test3button>
div>
<script type="text/javascript">
var vm = new Vue({
el : '#msg',
methods : {
test1(){
alert(1);
},
test2(passage){
alert(passage)
},
test3(event){
alert(event.target.innerHTML)
}
}
});
script>
body>
html>
