vue 指令

新建一个vue项目  vue  create  项目名称   

执行 npm run serve

新建一个vite项目 npm init vite-app 项目名称 

cd进入目录 npm i    执行npm run dev

新建一个react项  npx create-react-app 项目名称

执行  npm start

内容渲染指令

<div id="app">

       v-text {{ }}只能渲染纯文本数据 v-html可渲染标签类html元素

        <p v-text=”username”> 123</p>    v-text 会覆盖原本数据(123)  所以主用{{ }}

        <p>{{username}}</p>

        <p v-html=”info”></p>

</div>

  1. 导入 Vue 的库文件

  <script src="./lib/vue-2.6.12.js"></script>

  2. 创建 Vue 的实例对象

  <script>

    // 创建 Vue 的实例对象

    const vm = new Vue({

      // el表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器

      el: '#app',

      // data 对象就是要渲染到页面上的数据

      data: {

        username: 'zhangsan',

        info:'<h4 style="color:red "> 你好啊</h4> '

      }

    })

  </script>

属性渲染指令

v-bind： 或  简写为  :
<div class="app">

        <input type="text" v-bind:placeholder='gender'>

        <input type="text" :placeholder='gender'>

  </div>

事件渲染指令

v-on:可简写为@  ( )为传参
		 
<button v-on:click='add(5)'>+1</button>
        <button v-on:click='sub'>-1</button>
        <button @click='add(2)'>11</button>  
        <button @click='add2($event,1)'> +N</button>  获得触发事件对象 $event
        <button @click='add3'>11</button>    
this == 创建的vue实例对象 如nw 

const nw=new Vue({ 
            el:'.app',
            data:{
                count:0,
            },
            methods:{
                add(n){
                    this.count+=n
                },
                sub(){
                    this.count--
                },
                add2(e,n)
                {
                    n为传递来的参数1
                    e.target为触发事件的对象 button标签
                }
                add3()
                {
                  event.target为触发事件的对象 button标签 等同于add2中的e
                }
            }
        })

单击修饰符

 按键修饰符

        <input type="text" @keyup.esc='clear' @keyup.enter='submit'>  给回车和esc绑定事件

 双向绑定 v-model  （仅表单元素可用)

更改绑定了v-model元素的值  data:{}中相应元素也会更改

<div class="app">
        <input type="text" v-model='uname'> //更改该input的值 data中的uname值也会改变   
        <input type="text" :value='uname'>
        <select v-model='city'>   //city =2  会默认显示上海(value=2的标签)
            <option value="" >请选择</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">山东</option>
        </select>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const nw=new Vue({
            el:'.app',
            data:{
                uname:'gebilaoli',
                city:'2'
              }
        })
    </script>

   .lazy失去焦点更新数据

条件渲染指令  （显示或隐藏）

v-show  动态为元素添加display：none样式，来实现元素的显示和隐藏  （频繁切换显示或隐藏使用）

v-if         动态创建或移除元素，实现元素的显示或隐藏   （默认不需要展示使用）

v-else-if     v-else  （结合v-if使用）

循环渲染指令

v-for          要给谁执行循环给谁加v-for  会将其内的子元素一并复制

<tr v-for='(item,i) in list' :key=’item.id’ :title=’itme.name’>

Title 给每一行加一个标题

item数组中的数据  i索引可不加   list数组名

                   <td>{{i+1}}</td>

                   <td>{{item.id}}</td>

                   <td>{{item.uname}}</td>

               </tr>

 lable的for属性

按钮
<input type="checkbox" class="custom-control-input" :id="'a'+item.id"v-model='item.status'>
   <label class="custom-control-label" :for="'a'+item.id" v-if='item.status'>已启用</label>
   <label class="custom-control-label" :for="'a'+item.id" v-else>已禁用</label>
   lable的for标签指向input的id标签           

根据id删除对应信息

          <a href="javascript:;" @click="remove(item.id)">删除</a>
          remove(id) {
          this.list = this.list.filter(item => item.id !== id)
        },

给form标签添加submit事件

        <form @submit.prevent="add">