Vue框架基礎語法
阿新 • • 發佈：2019-03-21
types method 結構 doc () 整體 abc lan todo
# 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{width: 200px;height:200px;background-color: yellow}.red{width: 200px;height:200px;background-color: red}
.blue{width: 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="{width: ‘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=‘{width: 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
}
}
});
Vue框架基礎語法