Vue-1-v指令、组件化、实例属性、实例方法

本文深入解析Vue.js的关键特性，包括数据绑定、指令、组件化应用构建、实例属性及方法。详细介绍v-if、v-for、v-on等指令的使用场景，以及组件的绑定数据与循环展示方式。同时，探讨了实例属性$data、$el和$ref的运用，以及实例方法如$watch的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、注意

Vue 底层自己操作DOM，不需要程序员再管，忽略DOM操作，和数据绑定
Vue 单页面，严禁刷新
el == element 元素【支持 id 和 class…】

说明demo1

 var app=new Vue({
     el:'#div1',
     data:{
         mes1: 'Hello Vue...',
         mes1_1: '你好，世界',
     }
 });

指 #div1 控制范围内所有 mes1 都为 Hello Vue，所有 mes1_1 都为你好，世界

说明demo2–支持多个Vue实例，但不建议

Vue.js开发时，通常页面上只创建一个vue实例；不过可以多个Vue实例
【可以：div1 和 div2 嵌套一个外层div，Vue实例只绑定外层的div】

 <div id="div1">
     <span>{{mes1_1.toUpperCase()}}</span>
 </div>

 <div class="div2">
     {{mes2}}
     {{mes1}}
 </div>

 <script>
 var app=new Vue({
     el:'#div1',
     data:{
         mes1_1: 'world',
     }
 });
 var app2=new Vue({
     el:'.div2',
     data:{
         mes2:'你好',
         mes1:'世界'
     }
 })
 </script>

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

二、v- 指令

v-if ：当为false时，DOM 内存都没有

 <div id="div1" class="div_c1" v-if="seen">
     {{mes1}}
 </div>
 <script>
 var app=new Vue({
     el:'#div1',
     data:{
         mes1: 'Hello Vue...',
         seen: false
     }
 });
 </script>

v-for ：在哪个标签加，那个标签就循环

ul 循环三次，每个ul只有一个li，li内容为tags的对应的内容：

 <div id="div1">
     <ul v-for="item in tags">
         <li>{{item.id}}</li>
     </ul>
 </div>
 <script>
     var app=new Vue({
         el:'#div1',
         data:{
             tags:[{"id":"001"},{"id":"002"},{"id":"003"}]
         }
     });
 </script>

若放在li里

，则为一个ul，里面三个li

v-on

 <div id="div1">
     <button v-on:click="add_tags">添加元素</button>
     <button v-on:click="reverse_mes1">反转消息</button>
 </div>
 var app=new Vue({
     el:'#div1',
     data:{
         tags:[{"id":"001"},{"id":"002"},{"id":"003"}]
     },
     methods:{
         add_tags:function () {
             this.tags.push({"id":"004"})
         },
         reverse_mes1:function () {
             this.mes1 = this.mes1.split('').reverse().join('')
         }
     }
 });

以上都为单向绑定，即数据驱动DOM

双向绑定：v-model 用于可以编辑的，如文本框

 <div id="div1">
     <input type="text" v-model="mes1">
 </div>
 var app=new Vue({
     el:'#div1',
     data:{
         mes1: 'Hello Vue...',
     }
 });

{{}} v-text v-once v-html

 <p>1This is：{{mes1.length>5?mes1.slice(0,5)+'...':mes1}}</p>
 <p v-text="'2This is：'+mes1"></p>

v-text 当出现异常时，不会显示{{mes1}}

v-bind :

 <img v-bind:src="img_url">
 <img :src="img_url">

v-on @
```
 <button @click="func">测试</button>
```

v-cloak

 <style>
     [v-cloak]{
         display: none;
     }
 </style>
 <p v-cloak>{{mes1}}</p>

三、组件化应用构建（component）

每个元素都是从Vue开始，必须有Vue()，否则没有该元素 如 div3 不显示

vue实例通过 vue组件初始化，所以 vue组件必须在 vue实例之前

 <div id="div1">
     <nav-item></nav-item>
 </div>
 <div id="div2">
     <nav-item></nav-item>
 </div>
 <div id="div3"> # 不显示
     <nav-item></nav-item>
 </div>
 <script>
     Vue.component('nav-item', {
         template: `<ul>
                         <li>apple</li>
                         <li>pear</li>
                     </ul>`
     });
 new Vue({
     el:'#div1'
 });
 new Vue({
     el:'#div2',
 });
 </script>

组件绑定数据

 <div id="div1">
     <todo-item v-bind:tags="tags"></todo-item>
 </div>
 
 <script>
     Vue.component('todo-item', {
         props: {
             tags:Array
         },
         template: `<ul>
                         <li v-for="item in tags">{{item.id}}和{{item.name}}</li>
                     </ul>`
     });
 var div1 = new Vue({
     el:'#div1',
     data:{
         tags:[{"id":"001","name":"Apple"},{"id":"002","name":"Banana"},{"id":"003","name":"Pear"}]
     }
 });
 
 </script>

组件循环

 <div id="div2">
     <tree_display v-bind:obj="tags"></tree_display>
 </div>
 
 <script>
     Vue.component("tree_display",{
         props:{
             obj:Object
         },
         template:`
             <p>
                 <span>{{obj.name}}</span>
                 <tree_list  v-bind:Aobj="obj.children"></tree_list>
             </p>
         `
     });
     Vue.component("tree_list",{
         props:{
             Aobj:Array
         },
         template: `
             <ul>
                 <li v-for="item in Aobj">
                     <tree_display v-if="item.children" v-bind:obj="item"></tree_display>
                     <span v-else>{{item.name}}</span>
                 </li>
             </ul>
         `
     });
     var div2=new Vue({
         el:"#div2",
         data:{
             tags:{
                 "name":"Root",
                 "children":[
                     {"name":"001","children": false},
                     {
                         "name":"002",
                         "children":[{"name":"Apple","children":false},{"name":"Banana","children":false}]
                     },
                     {
                         "name":"003",
                         "children":[
                             {
                                 "name":"003_1",
                                 "children":[{"name":"bird","children":false},{"name":"fish","children":false}]
                             },
                             {
                                 "name":"003_2",
                                 "children":[{"name":"red","children":false},{"name":"blue","children":false}]
                             }
                         ]
                     }
                 ]
             }
         }
     });
 </script>

参考文档：https://www.cnblogs.com/gongshunfeng91/p/11315249.html

四、实例属性

$data 和 $el

 var app=new Vue({
     el:'#div1',
     data:{
         mes1: 'Hello Vue...',
         mes1_1: 'world',
         seen: true,
         tags:[{"id":"001"},{"id":"002"},{"id":"003"}]
     }
 });
 app.$data.mes1 = 'vue js';  # 可以在Vue实例里 this.mes1='vue js';
 app.$el.innerHTML='haha'; # 相当于document.document.querySelector('#div1').innerHTML='haha'

$ref : 获取ref=’…'的DOM元素，对写死的属性进行改变

 <div id="div1" class="div_c1">
     <h1 ref="myh1">写死的数据</h1>
     {{mes1}}
     <p>{{mes1}}</p>
     <input type="text" v-model="mes1">
     <button v-on:click="change">改变</button>
 </div>
 
 <script>
 
 var app=new Vue({
     el:'#div1',
     data:{
         mes1: 'Hello Vue...',
         mes1_1: 'world',
     },
     methods:{
         'change':function () {
             this.mes1='不写死的数据改变';
             this.$refs.myh1.innerHTML='写死的数据进行改变'
         }
     }
 });
 // app.$data.mes1 = 'vue js';
 // app.$el.innerHTML='haha';
 
 
 </script>

五、实例方法

vm.$watch(expOrFn,callback())

 <div id="div1" class="div_c1">
     {{mes1}}
     <p>{{mes1}}</p>
     <input type="text" v-model="mes1">
     <button v-on:click="change">改变</button>
 </div>
 
 <script>
 
 var app=new Vue({
     el:'#div1',
     data:{
         mes1: 'Hello Vue...',
         mes1_1: 'world',
     },
     methods:{
         'change':function () {
             this.mes1=this.mes1.split('').reverse().join('')
         }
     }
 });
 // 比较新值和旧值，当值变化时，进行函数
 app.$watch('mes1',function (newVal,oldVal) {
     alert(newVal)
 })

使用一次则取消

 var unwatch=app.$watch('mes1',function (newVal,oldVal) {
     alert(newVal);
     unwatch()
 })

vm.$set(target,propertyName/index,value)
vm.$delete(target,propertyName/index)