Vue_ 组件的重要选项

你的名字 2022-05-22 13:07 187阅读 0赞

**一.初识Vue**：  
    我们常规编写的页面时HTML、css、JavaScript，但是在Vue中，我们编写静态页面在.vue中，webpack打包工具帮助我们解析Vue成html,css,javascript.  
![这里写图片描述][70]  
学习Vue主要是学习template、script、style标签,他们的对应关系：  
![这里写图片描述][70 1]  
一个简单的例子：

var hello = new Vue({
            el: '#hello',
            data: {
                message: 'hello world!'
            }
        });

数据绑定：

<div id="hello"> { { message}} </div>

**二.Vue对象的重要选项**  
  
**1.Vue 对象：**

(1).data: Vue所有的数据都是放在data里面的，data也是一个对象，与页面数据双向绑定。

new Vue（{
      data： 
      {
        message：‘hello vue!’
      }
     }）

(2).methods: 封装方法

message：{ dosomething:function(){ console.log(this.a) }
    }

(3).watch: 监听

watch：{
    "a":function(){    
    //监听数据a进行监听，数据a 改变，就会执行。
    }
    }

(4).computed:计算属性  
在开发当中经常遇到数值计算，比如说有两个变量值，但是输出的是两者的计算值和

computed:{
       fullname:function(){ 
           return  this.firstname + ""+ this.lastname 
     }
    }
    // 页面使用：{ {fullname}}
    //当firstname和lastname没变的情况下，fullname会使用缓存的结果.
    // 只有firstname和lastname任何一方发生变化时，才会去重新计算。
    //这种只有依赖方发生改变才会去重新计算的模式，会大大提高效率

**2.模板指令**  
(1).模板指令: -html和vue对象的粘合剂  
数据渲染:v-text、v-html、\{ \{\}\}(插值表达式)  
模板指令是写在HTML当中。  
![这里写图片描述][70 2]  
(2)模板指令：v-if、v-show  
![这里写图片描述][70 3]  
附：他们都是控制元素的显示和隐藏，区别是什么？  
v-if 如果条件不符合，直接不会渲染这个标签元素  
v-show相当于css中的display为none的效果，元素还在，只是隐藏了  
(3).模板指令:v-for  
渲染循环列表：v-for

<div id="app"> <ul> <li v-for="litext in litext"> { { litext.text }} </li> </ul> </div>

(4).模板指令v-on：简写@  
事件绑定：v-on，定义在methods

<input v-model='newItem'v-on:keyup.enter="addNew">
    //在methods中：
    addNew: function(){ 
         //事件处理函数
          this.items.push({
          label:this.newItem,
          isfinishing:false  
    })

(5).模板指令:v-bind

<div v-bind:class="{'isfinished':item.isfinishing}">
     //属性绑定v-bind：只对dom元素的属性一些操作：
     <img v-bind:src='imgsrc'>

最常用的绑定属性还是class  
如果是是一个对象，\{red:’isRed’\} key 是class的名字，value是是否有这个class 变量是一个布尔值  
如果是一个数组的话，\[calssA ,classB\] 变量是一个字符串，是直接展现出来的，绑定了两个class类  
如果是混合的，\[classA，\{classB：isB，classC：IsC\}\] classA肯定是有的，classB和classC的展示要看布尔值  
  
**三.初识Vue小结**  
改变自己的思想，不是面向DOM对象的编程，而是面向数据的编程  
![这里写图片描述][70 4]

[70]: /images/20220522/ef8e0174dee8410fbc3a817dc3d3c8c7.png
[70 1]: /images/20220522/b962547d72794eddbf7549df8de902d6.png
[70 2]: /images/20220522/21fd37ec66bb40a0a5ccbdef4ff2aa74.png
[70 3]: /images/20220522/07354929d9934a478b26c266ef61c824.png
[70 4]: /images/20220522/263187308f2d4cefb462bf5ee4147470.png