Vue学习笔记（一）

深藏阁楼爱情的钟 2022-12-11 15:30 322阅读 0赞

### 一. 计算属性 ###

#### 1.1. 计算属性的本质 ####

*  fullname: \{set(), get()\}
    
    计算属性不加动词，一般不用set(),为只读属性。
    
        computed:{       
              fullName:{         
                get:function () { 
                  return this.firstName+' '+this.lastName
                }
              }    
            // 等价于
            // fuLLName:function () { 
            // return this.firstName+' '+this.lastName
            // }
            // }
          })

#### 1.2. 计算属性和methods对比 ####

*  计算属性computed在多次使用时, 只会调用一次。
 *  methods每次值更新都会调用
 *  computed是有缓存的

### 二. 事件监听 ###

#### 2.1. 事件监听基本使用 ####

*  v-on: 语法糖 @：

#### 2.2. 参数问题 ####

*  btnClick
    
    无参数时默认传入event事件
 *  btnClick(event)
 *  btnClick(abc, event) -> $event

#### 2.3. 修饰符 ####

*  stop
 *  prevent
 *  .enter
 *  .once
 *  .native

### 三. 条件判断 ###

#### 3.1. v-if/v-else-if/v-else ####

略

#### 3.2. 登录小案例 ####

<div id="app">
      <span v-if="isUser">
         <label for="username">用户账号</label>
         <input type="text" id="username" placeholder="请输入账号">
      </span>
      <span v-else>
        <label for="email">用户邮箱</label>
         <input type="text" id="email" placeholder="请输入邮箱">
      </span>
      <button @click="isUser=!isUser">切换类型</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app=new Vue({ 
        el: '#app',
        data:{ 
          isUser:true,
        }
      })
    </script>

#### 3.3. v-show ####

*  v-show和v-if区别

<h2 v-if="isShow" id="aaa">{ { message}}</h2>
    
    
      <h2 v-show="isShow" id="bbb">{ { message}}</h2>

### 四. 循环遍历 ###

#### 4.1. 遍历数组 ####

v-for自带index下标

<div id="app">
      <ul>
        <li v-for="item in letters" :key="index">{ { item}}</li> 
      </ul>
    </div>
    <script>
      const app=new Vue({ 
        el: '#app',
        data:{ 
          letters:['A','B','C','D','E']
        }
      })
    </script>

#### 4.2. 遍历对象 ####

*  value
 *  value, key
 *  value, key, index

#### 4.3. 数组哪些方法是响应式的 ####

1.push方法    this.letters.push('aaa')
    2.通过索引值修改数组中的元素(不响应    this.letters[1]='bbb';
    3.pop() 删除最后元素 响应
    4.shift() 删除第一元素 响应
    5.unshift() 在数组最前面添加元素 响应
    6.splice(start,start+X,追加元素值) 删除\替换\插入元素 响应
    7.sort() 排序 响应
    8.reverse()  反转 响应
    9.set(要修改的对象,索引值,修改后的值)

#### 4.4. 作业完成 ####

题目：点哪哪亮

### 五. 书籍案例 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTIzMDc5_size_16_color_FFFFFF_t_70_pic_center]

### 六. v-model的使用 ###

#### 6.1. v-model的基本使用 ####

*  v-model <=> v-bind:value && v-on:input

#### 6.2. v-model和radio/checkbox/select ####

#### 6.3. 修饰符 ####

*  lazy：失去焦点后更新
 *  number：指定数字类型
 *  trim：修剪空格

### 七. 组件化开发（重点） ###

#### 7.1. 认识组件化 ####

组件化实现组件模块复用

#### 7.2. 组件的基本使用 ####

#### 7.3. 全局组件和局部组件 ####

#### 7.4. 父组件和子组件 ####

#### 7.5. 注册的语法糖 ####

#### 7.6. 模板的分类写法 ####

*  script
    
        
        <script type="text/x-template" id="cpn1"> <div> <h2>我是标题</h2> <p>我是内容</p> </div> </script>
 *  template
    
        
        <template id="cpn2">
          <div>
            <h2>我是标题2</h2>
            <p>呵呵呵呵呵呵</p>
          </div>
        </template>
    
    template:’\#ID’

Vue.component('cpn',{
      template: '#cpn2',
    })

####  ####

#### 7.7. 数据的存放 ####

*  子组件不能直接访问父组件
 *  子组件中有自己的data, 而且必须是一个函数.
 *  为什么必须是一个函数.

#### 7.8. 父子组件的通信 ####

*  父传子: props
    
        <script> //  const cpn={ template:'#cpn', //数组方式 // props:['cmovies','cmessage'], props:{ //与子组件通信 //1.类型限制 // cmovies:Array, // cmessage:String //2.提供一些信息 cmessage:{ type:String, default:'aaaaaaaa' }, cmovies:{ type:Array, default:[], } }, data(){ return{ } }, methods:{ } } const app=new Vue({ el: '#app', data:{ message: '你好啊', movies:['海王','海贼王','海尔兄弟'] }, components:{ cpn } }) </script>
    
    使用：
    
        <div id="app">
          <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
        </div>
        
        <template id="cpn">
          <div>
            <ul>
              <li v-for="item in cmovies">{
             {item}}</li>
            </ul>
            <h2>{
             {cmessage}}</h2>
          </div>
        </template>
 *  子传父: $emit
    
        <script> //子组件 const cpn={ template:'#cpn', data(){ return{ categories:[ { id:'aaa',name: '热门推荐'}, { id:'bbb',name: '手机数码'}, { id:'ccc',name: '家用家电'}, { id:'ddd',name: '电脑办公'} ] } }, methods:{ btnClick(item){ //发射自定义事件 this.$emit('itemclick',item) } } } //父组件 const app=new Vue({ el: '#app', data:{ info:{ name:'why', age:18, height:1.88 }, message:'aaaaaa' }, components:{ cpn }, methods: { cpnClick(item){ console.log('clickhappen',item); } } }) </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTIzMDc5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/bbe90b9a43e646859be01368ec53ec21.png