Vue入门基础

Posted 2022-01-18 小hu同学

本篇文章是接着上一篇文章的，可以先看下 上一篇文章

4.Vue常用特性

4.1 常用特性概览

• 表单操作
• 自定义指令
• 计算属性
• 过滤器
• 侦听器
• 生命周期

4.2 表单操作

1. 基于Vue的表单操作

1. input 单行文本
2. textarea 多行文本
3. select 下拉多选
4. radio 单选框
5. checkbox 多选框

1、单行文本 绑定数据

     <span>姓名：</span>
        <span>
          <input type="text" v-model='uname'>
        </span>
    <script>
    var vm = new Vue(
        el:'#app',
        data:
            uname:'cookie'
        ,
        )
        </script>

禁止表单的默认行为， <input type="submit" value="提交" @click.prevent='handle'>

2、 radio 单选框

 <div>
        <span>性别：</span>
        <span>
        <!--给一个值 绑定一个属性 -->
          <input type="radio" id="male" value="1" v-model='gender'>
          <label for="male">男</label>
          <input type="radio" id="female" value="2" v-model='gender'>
          <label for="female">女</label>
        </span>
      </div>
      
     <script>
    var vm = new Vue(
        el:'#app',
        data:
           gender：1
        ,
        )
        </script>  

3、checkbox 多选框

<div>
        <span>爱好：</span>
        <input type="checkbox" id="ball" value="1" v-model='hobby'>
        <label for="ball">篮球</label>
        <input type="checkbox" id="sing" value="2" v-model='hobby'>
        <label for="sing">唱歌</label>
        <input type="checkbox" id="code" value="3" v-model='hobby'>
        <label for="code">写代码</label>
      </div>
      <div>
      
       <script>
    var vm = new Vue(
        el:'#app',
        data:
        //绑定的值 是2 和3  则页面上默认显示的 就是勾选的2和3
           hobby:['2','3'],
        ,
        )
        </script>  

4、select 下拉多选

<div>
        <span>职业：</span>
        <!--multiple 添加后可进行多选 -->
        <select v-model='occupation' multiple>
          <option value="0">请选择职业...</option>
          <option value="1">教师</option>
          <option value="2">软件工程师</option>
          <option value="3">律师</option>
        </select>
      </div>
        <script>
    var vm = new Vue(
        el:'#app',
        data:
        //默认勾选  2、3
        occupation:['2','3'],
        ,
        )
        </script>  

5、 textarea 多行文本

      <div>
        <span>个人简介：</span>
        <textarea v-model='desc'></textarea>
      </div>
        <script>
    var vm = new Vue(
        el:'#app',
        data:
        //默认勾选  数据
         desc:'nihao'
        ,
        )
        </script>  
      
      

2.表单域修饰符(number/trim/lazy)

• number：转化为数值
• trim：去掉开始和结尾的空格
• lazy：将input 事件切换为chang事件

<input v-model.number = "age" type="number">

1、number转化为数值

<div id="app">
        <!-- 将字符串转换为number  进行相加  -->
        <input type="text" v-model.number="age">
        <button @click="handle">点击</button>
</div>
 <script>
        var vm = new Vue(
            el:'#app',
            data:
                age:'',
            ,
            methods:
                handle:function()
                    console.log(this.age +12);
                
            
        )
    </script>

2、trim去掉首尾空格

<div id="app">
         <!-- trim 去掉左右两边的空格 -->
        <!--<input type="text" v-model.trim="info">-->
        <input type="text" v-model="info">
        <button @click="handle">点击</button>
</div>
 <script>
        var vm = new Vue(
            el:'#app',
            data:
               info:'',
            ,
            methods:
                handle:function()
                //打印长度
                    console.log(this.info.length);
                
            
        )
    </script>

没有使用trim去空格 空格的长度也算进去了 打印的长度为4

使用trim 去空格

3、lazy将input转为chang事件

<div id="app">
     <!-- lazy 失去焦点后才会进行显示-->
       <!--  <input type="text" v-model.lazy="msg">-->
       
        <!-- <input type="text" v-model="msg">-->
        <div>msg</div>
        <button @click="handle"> 点击 </button>
</div>
<script>
        var vm = new Vue(
            el:'#app',
            data:
                msg:''
            ,
            methods:
                handle:function()
                
                
            
        )
    </script>

默认情况下 在input事件中 输入框中输入内容 绑定的msg 也会发生变化

添加lazy后 是失去焦点后 才会发生变化

4.3 自定义指令

1、为何需要自定义指令？

内置指令不满足需求

2、 自定义指令的语法规则（获取元素焦点）

Vue.directive('focus'
    //el 表示指令所绑定的元素
    inserted:function(el)
    //获取元素的焦点
    el.focus();
    
)

3、自定义指令用法

详细的自定义指令的用法可参考官方文档 自定义指令

<input type="text" v-focus >

刷新网页后自动获取到输入框的焦点

4、 带参数的自定义指令（改变元素背景颜色）

Vue.directive('color',
    inserted:function(el,binding)
        el.style.backgroundColor = binding.value.color;
    
)

指令的用法

<input type="text" v-color='color:"red"'>

实例代码

  <div id="app">
   <input type="text" v-color="msg">
  </div>

Vue.directive('color',
    bind:function(el,binding)
        el.style.backgroundColor = binding.value.color;
    
);
   var vm = new Vue(
            el:'#app',
            data:
                msg:
                    color:'blue'
                
            
          )

背景色就已经修改了 ，如果要改颜色的话，只需要修改msg里面的字段就好了

可以将全局的directive指令改成 局部的directive指令

在跟methods 同级目录下去创建
  directives:
                color:
                bind:function(el,binding)
                // console.log(binding);
            //根据指令的参数设置背景色
            el.style.backgroundColor = binding.value.color;
            
            ,
            focus:
                inserted:function(el)
                    el.focus()
                
            
        

4.4 计算属性（computed）

1、为何需要计算属性？

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容简洁。

代码示例

要求：将某个字符串反转 hello 反转为 olleh

//原生的方法 可读性较低
<div id="app">
        //split将字符串以空格分开   reverse反转 join拼接  
       <div>msg.split('').reverse().join('')</div>
       </div>
 <script>
 var vm = new Vue(
   el:'#app',
            data:
                msg:'hello'
            ,
 )
 </script>

2、计算属性的用法

computed:
   res:function()
                    return this.msg.split('').reverse().join('')
                
        

计算属性代码示例

<div id="app">
        //直接在这里调用函数名称
       <div>res</div>
       </div>
 <script>
 var vm = new Vue(
   el:'#app',
            data:
                msg:'hello'
            ,
             computed:
             //res 函数名
                res:function()
                //将方法写在函数中 return 出去
                    return this.msg.split('').reverse().join('')
                
            
 )
 </script>

3、计算属性（computed）与方法（methods）的区别

• 计算属性是基于他们的依赖进行缓存的
• 方法不存在缓存
  计算属性示例代码：

渲染结果添加一个res
在原来的computed的res里面加上一个打印

<div id="app">
        
       <div>res</div>
        <div>res</div>
       </div>
 <script>
 var vm = new Vue(
   el:'#app',
            data:
                msg:'hello'
            ,
             computed:
             //res 函数名
                res:function()
                console.log('computed')
                //将方法写在函数中 return 出去
                    return this.msg.split('').reverse().join('')
                
            
 )
 </script>

可以看到我们渲染了 2次翻转的结果，但是控制台只打印了一次，第二次的渲染就是从缓存中来的，好处是节省了性能

方法 示例代码：

<div id="app">
            <!--调用函数handle-->
       <div>handle()</div>
       <div>handle()</div>
    </div>
    <script>
    
        var vm = new Vue(
            el:'#app',
            data:
                msg:'hello'
            ,
            methods:
                handle:function()
                    //打印结果
                    console.log('methods')
                    return this.msg.split('').reverse().join('')
                
            ,                 
        )
    </script>

同样的 我调用了2次函数渲染，控制台就打印了2次，每次都会去重新执行函数

4.5 侦听器（watch）

1、侦听器的应用场景

数据变化时执行异步开销较大的操作
默认情况下，组件在初次加载完成后 不会调用watch侦听器，如果想让watch 侦听器立即被调用，则需要使用immediate选项示例如下

1.2 immediate选项

watch: 

username: 

// handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数

handler: async function (newVal) 

// 传递的值是否为空
if (newVal === '') return
//解构赋值
const  data: res  Vue.js 基础入门

 vue 基础 —— html版的 Vue 入门基础
 vue 基础 —— html版的 Vue 入门基础
 vue 基础 —— html版的 Vue 入门基础
 Vue基础入门讲义-环境配置
 VUE 入门基础