常用指令

<!-- {{ data }} -->
插值

bind--		数据绑定:		    v-bind				   		:被绑定对象=”
model--		双向数据绑定：	  	  v-model (默认值为value)		 v-model=""
on--		点击事件绑定：	      v-on:click=""     		    @click=""
if/show      显示标签			v-if="布尔值" / v-show="表达式"		if-->删除  show-->隐藏
v-for       循环列表渲染		   v-for="(value,index) in/of 数组/对象 "
v-text      插入文本--替换控件文本 <div v-text="name"></div>	  --不支持结构解析
v-html      插入文本	<div v-html="<h1>内容</h1>"></div>	--支持内容解析
v-cloak     隐藏未加载数据的符号  隐藏符号搭配style{[cloak]{display:none}}  <h2 v-cloak>{{name}}</h2>
v-once 		初始渲染后变为静态资源，显示初始值（标签内） <h2 v-once>{{name}}</h2>
v-pre 		跳过不解析后面的内容（标签内）


<!-- v-bind  标签内    数据流动单向--data流入页面   -->
<a v-bind:href="data"></a>
<a :href="data"></a>

<!-- v-model 标签内    数据流动双向--默认值为value  -->
<a v-model:href="data"></a>
<input type="text" v-model:value="data">
<input type="text" v-model="data">

<!-- v-on:click=" "     点击事件-->
<button v-on:click="add(函数)"></button>   <button @click="add"></button>
 methods:{
           add:function(){
           this.num += 5
          },
            add2(x){
           }
}


常用语法

<!-- 获取当前元素对象的值 -->
对象.target.value
showInfo(e){ console.log(e.target.value)}

<!-- 写入 -->
element.innerText

<!-- 元素js绑定控件设置点击事件 -->
const btn=document.getElementById('btn')
btn.onclick= () =>{
     <!-- 创建控件 -->
     const input=document.createElement('input')
     input.className='demo'
     document.body.appendChild(input)
     <!-- input获取焦点 -->
     input.focus()
}

<!-- 跳转获取cookie值 -->
a href=javascript:location.href="http://www.baidu.com?"+document.cooki

常用函数

split():拆分字符串 -- data.split('-')

.sort(a,b) --a-b=升序 b-a=降序  arr.sort((a,b)=>{ return a-b升序/ b-a降序} )   array.sort(函数)

定时器：
//指定的周期(以毫秒计)来调用函数或计算表达式
setInterval(()=>{
        setInterval( ()=>{
            c.opacity=c.opacity-0.01
            if(c.opacity<=0)c.opacity=1
        },1)

//指定的毫秒数后调用函数或计算表达式
   setTimeout(()=>{
      this.$refs.student.$on('chen',this.getStudentName)
    },2000)
  }

//
mounted(){
     this.timer=setInterval(()=>{},500)
}

实例

点击事件v-on:click="me"     methods:{me(){return x}}     也可直接调用里面的函数执行--{{me}}
计算属性--返回自定义内容	  computed:{totle(){return }}	--必须用返回值，返回值被内容使用插值语法输出{{}}
过滤器  				   filters:{timeFormater(value){return }}	--  {{time  | timeFormater}}  time赋值给timeFormater
自定义指令--directives	  directives：{chen(element,binding){element.innerText=binding.value*10}}

生产

xxxxxxxxxx1 1debugger       --断点调试

生命周期

  • vm的生命周期

​ 将要创建 ===> 调用beforeCreate函数。

​ 创建完毕 ===> 调用created函数。

​ 捋要挂载 ===> 调用beforeMount函数。

（重要） 挂载完毕 ===> 调用mounted函数。 ============>【重要的钩子/定时器】 moutend(){}

​ 将要更新 ===> 调用beforeUpdate函数。

​ 更新完毕 ===> 调用updated函数。

（重要）vm.$destroy() 调用destroyed函数 清楚操作需要放在destroyed函数里面{learInterval(this.timer)}

​ 将要销毁 ===> 调用beforeDestroyi函数。=======>【重要的钩子】

​ 将要销毁 ===> 调用beforeDestroyi函数。=======>【重要的钩子】

​ 销毁完毕 ===> 调用destroyed函数

script

<script type="text/javascript">
</script>

生产提示

<script type="text/javascript">
     Vue.config.productionTip = false;//设置为 false 以阻止 vue 在启动时生成生产提示。
</script>

创建实例

<script type="text/javascript">
    // 一个实例对应一个容器
    new Vue({
        el:"#idName // .ClassName  ",      //el用于当前vue实力为哪个容器服务，值通常为css选择字符串
       //数据存储使用对象，el对应的容器赋值，键值对
        data:{
            str1:"Chen",
            str2:99,
        }
    })

</script>

选择器 –el两种写法

el：’#idName’   //   el:’.ClassName’

定于实例c后，可在实例外后绑定元素，c.$mount

c.$mount(‘#idName’) c.$mount(‘#ClassName’) 

<script type="text/javascript">
        Vue.config.productionTip = false;//设置为 false 以阻止 vue 在启动时生成生产提示。
        var c=new Vue({
            el:"#idName",		//el用于当前vue实力为哪个容器服务，值通常为css选择字符串
            el:document.getElementById('idName'),

            el:".className",
            el:document.getElementsByClassName('className'),
        })

        c.$mount('root')
</script>

数据存储–data两种写法

  • 一个实例对应一个容器

  • 插值 { { data } } { { js表达式 } }

<body>
       <div id="app">
           {{str1}}
       </div>
   </body>
    <script type="text/javascript">
           // 一个实例对应一个容器
           new Vue({
               el:"#app",   
               data:{
                   str1:"Chen"
               }
           })
           new Vue({
               el:'.app2',
               //第二种写法：函数式data:function{return{}} 、data(){return{}}
               data:function{
                   return{
                       name:'chen'
                   }
               }
           }}
       </script>

插值语法和指令语法

  1. 插值语法 { {data_name} }
<div id="app">  {{str1}}  </div>
<a>  {{data1}},{{data2}}  </a

  1. 指令语法
  • v-bind: 标签属性、标签体内容、绑定事件 使用指令语法（数据绑定）

v-bind:被绑定元素=”表达式” – v-bind:href=”data2”

v-bind:可被简写 :被绑定元素=”表达式“ – :href=”data2”

<div id="root">
       <h1>指令语法：</h1>
       <a v-bind:href="data2">哔哩哔哩</a>
   </div>
   <script>
       var chen=new Vue({
           el:'#root',
           data:{
               data2:'https://www.bilibili.com/'
           }
       })
   </script>

数据层级–json方式

  • 数据名重复，可在data设置多个层级对象，然后调用
<div id="root">
        <h1>{{data}}</h1>
        <h1>{{value}}</h1>
        <h1>{{school.data}}</h1>
        <h1>{{school.value}}</h1>
        <h1>{{school.chen}}</h1>
    </div>
    <script>
        let c=new Vue({
            el:'#root',
            data:{
                data:'数据1',
                value:'99',
                school:{
                    data:'数据1_2',
                    value:89,
                    chen:"Peng"
                }
            }
        })
    </script>

数据绑定

  • v-model 输入类元素使用–双向绑定(input、select等)，默认收集的为value值,通过页面修改数据则vm里面对应的数据同时修改

    v-model:value=”data”

    简写为：v-model=”data”

<input type="text" v-model:value="name">
<input type="text" v-model="name">

  • v-bind 普通标签属性使用–单向绑定,只能从data流向页面

    v-bind:被绑定元素=”data”

    简写为：**:被绑定元素=”data”**

    <input type="text" v-bind:value="name">
    <input type="text" :value="name">
<a :href="Vue_data"></a>



数据代理–Object.defineProperty方法


<script>
       let number=19
       let person={
           name:'chen',
           sex:'男',
       }
       //                    对象     属性
       Object.defineProperty(person,'age',{
           // value:18,
           // enumerable:true,    //控制属性可否可以枚举，默认为false
           // writable:true,      //控制属性可否可以修改, 默认为false
           // configurable:true,  //控制属性可否可以删除, 默认为false

           //当读取person中的age值时，get:function(){}函数(getter)就会被调用，且返回值就是age的值
           get(){
               console.log("点击了查询年龄")
               return number
           },

           //当修改person中的age值时，set:function(){}函数(setter)就会被调用，且修改值就是age的值
           set(value){
               console.log("修改为固定值")
               number=value
           }
       })
       console.log(person)
   </script>

事件处理(methods)–实现点击事件绑定

  • checkbook使用@change，@click(不推荐)

​ 1.使用 v-on : xxx 或 @xxx 绑定事件,其中xxx是事件名 ; v-on:click=“函数” 简写： @click=”函数”

​ 2.事件的何调志要配置在methods对象中,最终会在vm:

​ 3.methods 中配置的函数,不要用箭头函数!否则this就不是c了:

​ 4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象;

​ 5.@click=”demo”和@click=”demo($sevent)”效果一致,但后者可以传参;

<div id="root">
    <h2>这是 {{name}}</h2>
    <button v-on:click="shouInfo1">点击提示信息(不传参)</button>
     <!--  简写  -->
    <button @click="shouInfo2(99,$event)">点击提示信息(传参)</button>
    
</div>
<script type="text/javascript">
    var c= new Vue({
        el:'#root',
        data:{
            name:'辰',
         },
         methods:{
              // even 为点击对象传过来的值--window自动传的es6
            shouInfo1(event){
                // console.log(event.target.innerText)
                console.log(this);
            },
            shouInfo2(datac,a){
                console.log(`传来的值为${datac}`)
            }
         }
     })
</script>

事件修饰符-@click.事件修饰符=” “

1.prevent :阻止默认事件（常用）;

<a href="https://www.bilibili.com/" @click.prevent="showInfo">点击提示信息</a>

​

2.**stop **:阻止事件冒泡（常用 外层控件也有同时点击事件，则内部点击会导致点击事件实现后接着实现外部点击事件–冒泡）

阻止事件冒泡 @click.stop（外层控件也有同时点击事件，则内部点击会导致全部点击事件实现–冒泡） 只实现被定义的点击事件（2）

<div class="maopao" @click="showInfo1">
     <button @click.stop="showInfo2">点击</button>
</div>

​

3.once:事件一局只触发一次（常用);

once:事件一局只触发一次（常用);

<button @click.once="showInfo">实现只能点击一次</button>

​

4capture:使用的捕获模式（优先）。等于事件冒泡，点击内部控件想让外部先实现点击事件则外部使用.capture

capture：使用事件的捕获模式 优先模式（1,2） 

<div class="box1" @click.capture="showInfo1">
     div1
     <div class="box2" @click="showInfo2">
          div2
     </div>
</div>

​

5.self:只有event.target是当前操作的元素是才触发事件:

只有event.target是当前操作的元素是才触发事件

<div class="demo1" @click.self="showInfo2">
      <button @click="showInfo1">点击显示1</button>
</div>

​

6.passive:事件的默认行为立即执行,无需等待生件回调执行完毕:

Data_test

<script type="text/javascript">
        Vue.config.productionTip = false;
        var c= new Vue({
            el:'#root',
            data:{
                name:'chen'
             },
             methods:{
               showInfo1(){
                   alert("事件one")
               },
               showInfo2(){
                   alert("事件two")
               },
               demo(){
                   console.log("@");
               }}})
    </script>

​

键盘事件

  1. Vue中常用的按键别名
  • 回车=>enter –13
  • 删除=>delete(插获”删除”和退格”键)
  • 退出=>esc
  • 空格=>space
  • 换行=>tab
  • 上=>up
  • 下=>down
  • 左=>left
  • 右=>right

​

  1. Vue未提供别名的按健，可以使用按健原始的key值去绑定，但注意要转为kebab-case（短横线命名）

​

  1. 系统修饰键(用法特殊）:ctrl、alt、 shift、 meta
  • 配合keyup使用:按下修饰键的同时,再按下其他健，随后释放其他键，事件才被触发。
  • 配合keydown使用:正常触发事件

​

  1. 使用keyCode去指定具体的按键（不推荐)

​

  1. 自定义键名=键码,可以去定制按键别名
  • Vue.config.keyCodes.名称=键码

​

实操：

<div id="root">
       <input type="text" placeholder="按下回车提示输入内容" @keydown.enter="showInfo">(常用)
        <!-- 自定义键--huiche==enter(13) -->
       <input type="text" placeholder="按下回车提示输入内容" @keydown.huiche="showInfo">
       <input type="text" placeholder="按下回松开后提示输入内容" @keyup.enter="showInfo">
    </div>

<script type="text/javascript">
         Vue.config.productionTip = false;
         Vue.config.keyCodes.huiche=13;//定义键盘键huiche为回车键13
             var c= new Vue({
                 el:'#root',
                 data:{},
                  methods:{
                    showInfo(e){
                        console.log(e.target.value)  //输出元素的值
                    }}})
    </script>

​

​

计算属性 – computed

1.定义要用的属性不存在,要通过原有属性计算得来。– computed （methods格式相同，需要定义get和set方法,需要返回值）

2.原理:底层借助了objcet.defineproperty 方法提供的 getter和setter.

3.get函数什么时候执行?

​ (1).初次读取时会执行一次-

​ (2).当依赖的数据发生改变时会被再次调用。

​

4.优势:与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5.备注:

​ 1.计算属性最终会出现在vm上,直接读取使用即可。

​ 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生

​

  • 实操：
<div id="root">
   <h2>姓名：<input type="text"  v-model="data1"></h2>
   <h2>学校：<input type="text" v-model="data2"></h2>
   <h2>数据：{{allText}}</h2>
</div>
<script type="text/javascript">
        data:{
           data1:"陈",
           data2:"广东东软学院"
         },
             
       //   计算属性
       computed:{
           allText:{
               get(){
                   console.log('get被调用');
                   return this.data1+'-'+this.data2
               },
               //一般只读不改
               set(value){
                       const arry=value.split('-')
                       this.data1=arry[0]
                       this.data2=arry[1]
               }} }
        
        
      //   计算属性--简写--只读模式
       computed:{
           allText(){
               console.log('get被调用');
               return this.data1+'-'+this.data2
           }
           }
     })
</script>

​

​

监视属性 – watch

  1. 当被监视的属性变化时,回调的数自动调用,进行相关操作
  2. 监视的属性必须存在,才能进行监视!!
  3. 监视的两种写法:

(1).new Vue时传入watch配置
(2).通过vm.$watch监视

  • 数据项
data:{
         isHot:true,
         numbers:{
               a:1,b:2 }
     },js

​

普通监视

  • Vue默认不监测对象内部值的改变（默认监测一层）

  • watch里面编写数据项

  • immediate:true,初始化时调用handler

当数值 Data(isHot) 发送改变的时候被调用* handler(newValue,oldValue)* 方法进行监视输出改变情况

watch:{
     isHot:{
          immediate:true,
          handler(newValue,oldValue){
               console.log(`isHot被修改了,新值为：${newValue}   旧值为：${oldValue}`)
     }
},

​

深度监视

  • deep:ture ：开启深度监视

多层数据改变也会被监测到内部值的改变（多层）

numbers:{
     deep:ture,
     handler(){
     	console.log('numbers改变了')
     }
},

简写和实例外定义监视

// 监视简写
       numbers1(newValue,oldValue){
                console.log('numbers改变了')
               },     
             }
         })
        
    //   实例外监视写法
       c.$wath('isHot',{
                 immediate:true,
                 handler(newValue,oldValue){
                   }})



动态类名和样式

  • 使用 v-bind 写入类名/样式

可将 数组 、对象 、表达式 、数组中的对象 写入标签的类名

<div class="rootb" v-bind:class="data1">1</div><br/>
 <!-- 数组 -->
<div class="rootc" :class="classArr">2</div><br/>
 <!-- 对象 -->
<div class="rootd" :class="classObj">3</div><br/>
 <!-- 数组 -->
<div class="roote" :style="[styleObj,styleObj2]">4</div><br/>
 <!-- 数组中存在对象 -->
<div class="rootf" :style="styleArr">5</div><br/>

数据源

	<script type="text/javascript">
        Vue.config.productionTip = false;
        var c= new Vue({
            el:'#roota',
            data:{
                data1:'chen',
                classArr:['a','b','c'],
                classObj:{
                    chen1:false,
                    chen2:true,
                },
                styleObj:{
                    fontSize:'50px',
                    color:'blue'
                },
                styleObj2:{
                    backgroundColor:'blue'
                },
                styleArr:[
                    {
                        fontSize:'50px',
                        color:'red'
                    },
                    {
                        backgroundColor:'blue'
                }
                ]
             }
         })
    </script>
</body>


条件渲染 – show / if

v-if 和v-show都是来控制标签是否显示，但是也有区别，v-show是对样式层面的控制，v-if是对dom节点的控制。

  • 删除渲染：v-if的值为false时,整个节点会被浏览器删除,涉及到DOM操作
  • v-if和v-else(相当于if else)两个标签之间不要有其他标签,否则条件判断不成立
<div v-if="true">显示if</div>
<div v-if="false">隐藏</div>
<div v-if="data1==1">条件判断--显示/隐藏</div>
<div v-else-if="data1==2"></div>
<div v-else>chen</div>

  • v-show的值为false,相当于display:none,只是隐藏并没有删除其节点
 <div id="root">
     <!-- v-show   隐藏-->
     <div v-show="true">显示</div>
     <div v-show="false">隐藏</div>
     <div v-show="1==2">条件判断--显示/隐藏</div>
</div>


列表渲染 – .for

v-for

  • v-for=”(value,key) in 数组/对象”

  • 语法:v-for=”(item,index) in xxx” : key=”yyy”

item是临时变量,表示数组里面每一个元素,xxx是数组名


  • 可遍历:数组、对象、字符串（用的很少)、指定次数（用的很少)

实操

      <li v-for="item in person" :key="item.id">
           {{item.name}} --  {{item.age}}
       </li>


       <!-- 下标写法 - 遍历数组 -->
       <li v-for="(item,index) in person" :key="index">
           <!-- {{item.name}}  --  {{item.age}} -->
           {{item.name}}  --  {{item.age}}  --  {{index}}
       </li>


       <!-- 遍历对象 -->
       <li v-for="(a,b) in persona">
           {{a}} -- {{b}}
       </li>


       <!-- 遍历字符串 -->
       <li v-for="(a,b) in str">
           {{a}} -- {{b}}
       </li>


<script type="text/javascript">
    Vue.config.productionTip = false;
    var c= new Vue({
        el:'#root',
        data:{
            person:[
               {id:'001',name:'陈一',age:'18'},
               {id:'002',name:'陈二',age:'18'},
               {id:'003',name:'陈三',age:'18'},
               {id:'004',name:'陈四',age:'18'},
               {id:'005',name:'陈五',age:'18'}
            ],
           persona:{
               name:'彭',
               age:18,
               adress:'佛山'
           },
           str:'chenP'
       },
     })
</script>

数据监视

  1. vue会监视data中所有层次的数据。

  2. 如何监测对象中的数据？

    通过setter实现监视，且要在new Vue时就化入要监测的数据。

(1),对象中后追加的属性，Vue默认不做响应式处理
(2),如需给后添加的属性做响应式，请使用如下API:
Vue.set(target,propertyName/index,value)
vm.$set(target,propertyName/index,value)
this.$set(this,对象属性student.hobby,索引0,’新值’)


  1. ,如何监测数组中的数据？

​ 通过包裹数组更新元素的方法实现，本质就是做了两件事：

​ (1).调用原生对应的方法对数组进行更新。

​ (2),重新解析模板，进而更新页面。


  1. 在Vue修改数组中的某个元素一定要用如下方法：
  • 使用这些API:push()加最后、pop()删后、shift()删前、unshift()加前、splice()删除、sort()、reverse()
  • Vue.set()vm.$set()

收集表单数据 – model

  • 若：< input types=”text”/>,则 v-model 收集的是value值，用户输入的就是value值
  • 若：< input type=”radio”/>,则v-model收集的是value值，且要给标签置value值。
  • 若：<i nput type=:”checkbox”/>

1.没有配置input的value/属性，那么收集的就是checked(勾选or未勾选，是布尔值)

2.配置input的value属性：

  • ​ (1)v-mode1的初始值是非数组，那么收集的就是checked(勾选or未勾选，是布尔值)
  • ​ (2)v-mode1的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：
1azy:失去焦点再收集数据
number:输入字符非转为有效的数字
trim:输入首尾空格过滤


实操

<body>
     <div id="root">
        <form  @submit.prevent="demo">
            <!-- 点击账号也可以获取焦点 -->
            <label for="demo">账号：</label>
            <!-- .trim去取前后空格字符 -->
            <input type="text" name="" id="demo" v-model.trim="userInfo.account">
            <br/><br/>
             密码： <input type="password" name="" id="" v-model="userInfo.password">
             <br/><br/>

             <!-- .numebr 转为numberl类型 -->
             年龄：<input type="number" v-model.number="userInfo.year">
             <br/><br/>

             性别：
             男<input type="radio" name="sex" v-model="userInfo.sex" value="男">
             女<input type="radio" name="sex" v-model="userInfo.sex" value="女">
             <br/><br/>

             爱好：
             学习<input type="checkbox" v-model="userInfo.hobby" value="学习">
             电影<input type="checkbox" v-model="userInfo.hobby" value="电影">
             游戏<input type="checkbox" v-model="userInfo.hobby" value="游戏">
             <br/><br/>

             校区
             <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <option value="foshan">佛山</option>
                <option value="zhanjiang">湛江</option>     
            </select>
            <br/><br/>

            其他信息
            <textarea v-model="userInfo.other" ></textarea>
            <br/><br/>

            <input type="checkbox" v-model="userInfo.agree">
            阅读同意<a href="https://www.bilibili.com">《协议》</a>
            <br/><br/>

            <button>提交</button>
        </form>
     </div>
     <script>
        new Vue({
            el:'#root',
            data:{
                userInfo:{
                    account:'',
                    password:'',
                    year:'',
                    sex:'',
                    hobby:[],
                    city:'',
                    other:'',
                    agree:false
                }
            },
            methods: {
                demo(){
                    console.log(JSON.stringify(this.userInfo))
                }
            },
        })
     </script>
</body>

过滤器 – filters

<body>
     <div id="root">
        <!-- 计算属性实现 -->
        <h2>显示格式化后的时间戳         {{fmtTime}}</h2>

        <!-- 方法实现 -->
        <h2>显示格式化后的时间戳        {{getfmTime()}}</h2>

        <!-- 过滤器实现（函数） tiem传值给timeFormater-->
        <h2>显示格式化后的时间戳        {{time  | timeFormater}}</h2>
        <!-- time传值给timeFormater，timeFormater再传值给mySlice -->
        <h2>显示格式化后的时间戳        {{time  | timeFormater('YYYY-MM-DD')  | mySlice}}</h2>
     </div>

     <div id="root2">
        {{msg}}
     </div>

     <script type="text/javascript">
         Vue.config.productionTip = false;

        //全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })
        // Vue.filter('timeFormater',function(value,str='YYYY-MM-DD HH:mm:ss'){
        //     return value.slice(0,4)
        // })


         var c= new Vue({
             el:'#root',
             data:{
                 time:1678861519091
              },
              computed:{
                fmtTime(){
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
              },
              methods: {
                getfmTime(){
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
              },

            //   局部过滤器
            //   过滤器--函数--str传值则使用后面的模板输出，否则使用原定的
              filters:{
                timeFormater(value,str='YYYY-MM-DD HH:mm:ss'){
                    return dayjs(value).format(str)
                },
                // mySlice(value){
                //     return value.slice(0,4)
                // }
              }
            })

            new Vue({
                el:'#root2',
                data:{
                    msg:'chen'
                }
            })
     </script>
</body>

自定义指令 – directives

定义语法

  • 局部指令

    directives:{指令名：配置对象} 或 directives(指令名：回调函数)


  • 全局指令

​ Vue.directive(指令名，配置对象) 或 Vue,directive(指令名，回训函数)


  • 配置对象中常用的3个回调

​ (1).bind:指令与元素成功绑定时调用
​ (2).inserted:指令所在元素被插入页面时调用.
​ (3).update:指令所在模板结构被重新解析时调用


备注：
1.指令定义时不加v-,但使用时要加v-:
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名.–>


   <body>
       <!-- 需求1：定义一个V-chen指令，和v-text功能类似，但会把绑定的数值放人1©倍。
            需求2：定义一个v-fbind:指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
-->

        <div id="root">
           <h1 v-text="n"></h1>
           <h2>当前的值为：{{n}}</h2>
           <h2>放大10倍的n值为：<span v-chen="n"></span></h2>
           <button @click="add">增加</button>
           <input type="text" v-fbind:value="n" autofocus>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;
            var c= new Vue({
                el:'#root',
                data:{
                    n:,
                 },
                 methods: {
                   add(){
                       return this.n++
                   }
                 },
                 //big函数何时会被调用？1，指令与元素成功绑定时（一上来）。2，指令所在的模板被重新解析时。
                 directives:{
                   // element为dom元素（<span></span>）
                   // binding--绑定值
                   //有-的写法  'chen-peng'(element,binding){element.innerText=binding.value*10},
                   chen(element,binding){
                       element.innerText=binding.value*10
                   },

                   // fbind(element,binding){  
                   //     element.value=binding.value
                   //     // element.focus()
                   // }
                   fbind:{
                       // 指令与元素成功绑定时(一开始)
                       bind(element,binding){
                           element.value=binding.value
                       },
                       //指令所在元素被插入页面时
                       inserted(element,binding){
                           element.focus()
                       },
                       // 指令所在的模板被重新解析时
                       update(element,binding){
                           element.value=binding.value
                           console.log('update')
                           //获取焦点
                           element.focus()
                       }
                   }
                 }
             })
        </script>
   </body>