# vue 渐进式前端框架
# Angular GOOGLE 完全采用typescript 语法都是es6
# Vue 个人 FACEBOOK 语法都是es6解析成es5 简洁，功能强大，标准
# React 采用原生控件
# django MTV
# 前端设计模式MVVM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.yellow{ 200px;height:200px;background-color: yellow}
.red{ 200px;height:200px;background-color: red}
.blue{ 200px;height:200px;background-color: blue}
</style>
</head>
<body>
<div id="box">
<div id="box1">{{ msg}}
<p>{{ msg}}</p>
<p v-html="hml"></p>
<p>{{num/5}}</p>
<p >{{num+msg}}</p>
<!--<p v-on:dblclick="action2">{{num+msg}}</p>-->
<!--<p @mouseenter="action2">{{num+msg}}</p>-->
</div>
<div id="box2">
<p @click="action1" v-text="txt" :style="{ '200px', height: '200px', backgroundColor: h}">iunlk</p>
<p v-bind:sn="res">{{msg}}</p>
<p :href="'/static/art'+id">{{id}}</p>
<p @click="action2" :class="{yellow:no}">hk</p>
<p v-for="(i,index) in list">
<!--{{i}}-->
<span>{{index}}:{{i}}</span>
</p>
</div>
</div>
<div id="myvue">
<button @click="chosecolor('red')"></button>
<button @click="chosecolor('yellow')"></button>
<button @click="chosecolor('blue')"></button>
<p class="red" v-if="color=='red'"></p>
<p class="yellow" v-if="color=='yellow'"></p>
<p class="blue" v-if="color=='blue'"></p>
</div>
<form id="vue">
<input type="text" v-model="sh">
<input type="text" v-model="sh">
{{sh}}
<input type="text" v-model="first">
<input type="text" v-model="last">
<!--{{xing}}-->
<input type="text" v-model="one">
<input type="text" v-model="tow">
<input type="text" v-model="all">
</form>
<!--v-text-->
<!--v-html-->
<!--v-once-->
<div id="todolist">
<input type="text" v-model="txt">
<button @click="add">留言</button>
<ul>
<li v-for="(a,index) in list">
<!--<span @click="deleteMsg(index)">x</span>-->
{{a}}
<span @click="deletel(index)">删除</span>
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
<!--控制一个挂载点-->
var dolist=new Vue({ el:'#todolist',data:{msg:'snn',
txt:'',list:[]},
methods:{
add:function () {
var txt=this.txt
if(txt){
this.list.unshift(txt);
this.txt=''
}
},
deletel:function (index) {
this.list.splice(index, 1);
// this.txt = ''
}
}
});
var vue=new Vue({ el:'#box1',data:{msg:'snn',info:'lxm',
txt:'text指令',hml:"<b>html指令</b>",num:1000},
});
new Vue({el:'#box2',data:{msg:'snn',id:10,info:'lxm',res:'zz',no:false,list:[1,2,3,4,5],h:'yellow',
txt:'text指令',hml:"<b>html指令</b>",num:1000},methods:{ action1:function () {
alert('lxm'),this.h='red'
},action2:function () {
this.no=true
}}})
// alert(vue.$data.msg)
console.log(vue.msg)
var myvue=new Vue({el:'#myvue',data:{color:''},
methods:{
chosecolor:function (color) {
this.color=color
}
}
})
var vue=new Vue({el:'#vue',data:{sh:'',first:'',last:'',one:'',tow:'',all:''},
// methods:{
// xing:function () {
// console.log('yy')
// first=this.first
// last=this.last;
// if (first || last){return first+last}
// else {return '姓名'}
//
// }}
computed:{
xing:function () {
console.log('rr')
first=this.first
last=this.last;
if (first || last){return first+last}
else {return '姓名'}
}
}
// watch:{
// all:function () {
// this.one=this.all.split("1")[0]
// this.tow=this.all.split("1")[1]
// }
// }
})
// 一个被vue控制的页面结构称之为一个组件（vue实例）
</script>
</html>
<!--el与页面挂载点建立联系-->
<!--控制挂载点数据data-->
<!--控制挂载点的事件methods-->
<!--事件指令v-on-->
2.实例成员
// el: 挂载点
// data: 属性数据
// methods: 方法
// computed: 计算属性
// watch: 监听属性
// 3.指令
// 文本指令: {{ msg }} | v-text="msg" | v-html="msg" | v-once {{ msg }}
// 事件指令: v-on:click='btnClick' | @click='btnClick' | @click='btnClick($event, 自定义参数们)'
// 属性指令:
// -- v-bind:href=""
// -- :class='[c1, c2]' | :class='{active: true|false}' | :class='[c1, {active: true|false}]'
// -- :style='my_style(就是css格式的字典)' | :style='{ w; height: h}'
// 表单指令: v-model="" 注:绑定的就是表单元素的value
// 条件指令: v-show | v-if v-else-if v-else
// 循环指令: v-for="(ele, index) in eleArr" | v-for="(v, k, i) in dic"
插值表达式
new Vue({
el: '#app',
data: {
msg: '12345'
},
delimiters: ['{{{', ']]]']
});
class
<!-- class: {}语法 => abc为类名, def为该类名的值,值可以为true|false, 代表abc是否起作用-->
<!-- {类名: 是否起作用} -->
<p :class="{abc: def}"></p>
<button @click="orangeAction">切换</button>
<p :class="{orange: is_orange}"></p>
<!-- class: []语法 => 多类名 -->
<p :class="[a, b, c]"></p>
<!--整体语法-->
<!-- x和z是变量: x值就是类名, z值决定类名y是否起作用 -->
<p :class="[x, {y: z}]"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
cname: '',
def: false,
is_orange: '',
a: 'aaa',
b: 'bbb',
c: 'ccc',
x: 'red',
z: true
},
methods: {
redAction: function () {
this.cname = 'red'
},
yellowAction: function () {
this.cname = 'yellow'
},
orangeAction: function () {
this.is_orange = !this.is_orange
}
}
});