常用指令
1.v-text :innertext
2.v-html :innerhtml
3.v-for
4.v-if v-else-if v-else
5.v-show :display
6.v-on :@xxx='處理方法'
7.v-bind :屬性名稱=屬性值
8.v-model? -- input? -- textarea? -- select
指令修飾符:.lazy .number .trim
計(jì)算屬性:computed? 放入緩存 只有數(shù)據(jù)改變的時(shí)候才會(huì)重新計(jì)算
數(shù)據(jù)的監(jiān)聽: watch 注意可變數(shù)據(jù)類型跟不可變數(shù)據(jù)類型的區(qū)別
<!DOCTYPE html>
<html lang="zh-CN">
<head>
? ? <meta http-equiv="content-Type" charset="UTF-8">
? ? <meta http-equiv="x-ua-compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1">
? ? <title>Title</title>
? ? <script src="static/vue.min.js"></script>
</head>
<body>
<div id="app">
? ? {{ name }}
? ? {{ hobby }}
? ? <button @click="changedata">點(diǎn)我改變數(shù)據(jù)</button>
</div>
<script>
? ? let app =new Vue({
? ? ? ? el:'#app',
? ? ? ? data:{
? ? ? ? ? ? name:'alex',
? ? ? ? ? ? hobby:['抽煙','喝酒']
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? changedata:function () {
? ? ? ? ? ? ? app.$set(this.hobby,0,'抽二手煙')
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? watch:{
? ? ? ? ? ? hobby: {
? ? ? ? ? ? ? ? handler: function (val, oldVal) {
? ? ? ? ? ? ? ? ? ? console.log(val);
? ? ? ? ? ? ? ? ? ? console.log(oldVal);
? ? ? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? })
</script>
</body>
</html>
獲取Dom: 給標(biāo)簽綁定ref屬性? ref = "屬性值" this.$refs.屬性值
自定義指令:Vue.directive("指令名稱", function(el, binding){
el 綁定指令的標(biāo)簽元素
binding 指令的所有信息
<div id="app01">
? ? <div v-text="vue" v-pos="position" :class="{box:show} "> </div>
</div>
<script src="static/vue.min.js"></script>
<script>
? ? Vue.directive('pos',function (el,bindding) {
? ? ? ? if (bindding.value){
? ? ? ? ? ? el.style['position']='fixed';
? ? ? ? ? ? el.style['right']=0;
? ? ? ? ? ? el.style['bottom']=0
? ? ? ? }
? ? })
? ? let vm =new? Vue({
? ? ? ? el:'#app01',
? ? ? ? data:{
? ? ? ? ? ? vue:'hello vue',
? ? ? ? ? ? show:true,
? ? ? ? ? ? position:true
? ? ? ? }
? ? })
