发表于： 2023-05-15 21:08:29

0 108




vue知识点：


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>收集表单数据</title>
  <script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>

<body>
<!--
  收集表单数据:
    若:<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
    若:<input type=“radio"/>，则v-model收集的是value值，且要给标签配置value值
    若:<input type="checkbox"/>
  1.没有配置input的value属性，那么收集的就是checked (勾选 or 未勾选，是布尔值)
  2.配置input的value属性:
    (1)v-model的初始值是非数组，那么收集的就是checked (勾选 or 未勾选，是布尔值)
    (2)v-model的初始值是数组，那么收集的的就是value组成的数组备注:
      v-model的三个修饰符:lazy:失去焦点再收集数据
      number:输入字符串转为有效的数字
      trim: 输入首尾空格过滤
 -->

  <div id="root">
    <form @submit.prevent="demo">
      账号：<input type="text" v-model.trim="useInfo.account"> <br /><br />
      密码：<input type="password" v-model.trim="useInfo.password"> <br /><br />
      年龄：<input type="number" v-model.number="useInfo.age"> <br /><br />
      性别：
      男<input type="radio" name="sex" v-model="useInfo.sex" value="男">
      女<input type="radio" name="sex" v-model="useInfo.sex" value="女"> <br /><br />
      爱好：
      唱跳<input type="checkbox" v-model="useInfo.hobby" value="唱跳">
      rap<input type="checkbox" v-model="useInfo.hobby" value="rap">
      篮球<input type="checkbox" v-model="useInfo.hobby" value="篮球">
      <br /><br />
      所属校区
      <select v-model="useInfo.city">
        <option value="">请选择校区</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen">深圳</option>
        <option value="chengdu">成都</option>
      </select>
      <br /><br />
      其他信息：
      <textarea v-model="useInfo.other"></textarea> <br /><br />
      <input type="checkbox" v-model="useInfo.agree">阅读并接受<a href="http://baidu.com">《用户协议》</a>
      <br /><br />
      <button @click="">提交</button>
    </form>
  </div>
  <script>
    Vue.config.productionTip = false;
    const vm = new Vue({
      el: '#root',
      data: {
        useInfo: {
          account: "",
          password: "",
          age:18,
          sex: "",
          hobby: [],
          city: "",
          other: "",
          agree: ""
        }
      },
      methods: {
        demo() {
          // console.log(JSON.stringify(this._data))
          console.log(JSON.stringify(this.useInfo))
        }
      },
    });
  </script>
</body>

</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>过滤器</title>
    <script type="text/javascript" src="../vue_basic/vue.js"></script>
    <script type="text/javascript" src="../vue_basic/dayjs.min.js"></script>
  </head>
  <body>

<!--
    过滤器:
        定义:对要显示的数据进特定格式化后再显示适用于一些简单逻辑的处理)
        语法:
            1.注册过滤器: Vue.filter(name,callback) 或 new Vue{filters:0}
            2.使用过滤器: {[ xxx过滤器名]] 或 v-bind:属性 =xxx过滤器名
        备注:
            1.过滤器也可以接收额外参数、多个过滤器也可以串联
            2.并没有改变原本的数据，是产生新的对应的数据
 -->


    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h3>现在是：{{fmtTine}}</h3>
        <!-- methods实现 -->
        <h3>现在是：{{getFmtTine()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在是：{{time | timeFormater}}</h3>
        <!-- 过滤器实现（传参） -->
        <!-- <h3>现在是：{{time | timeFormater} | mySlice}</h3> -->
    </div>
    <script>
      Vue.config.productionTip = false;
      // 全局过滤器
    //   Vue.filter('mySlice',function(value){
    //     return value.slice(0,4)
    //   })
      const vm = new Vue({
        el: '#root',
        data:{
            time:1684117384401,
        },
        computed: {
            fmtTine(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') //时间戳转换
            }
        },
        methods: {
            getFmtTine(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') //时间戳转换
            }
        },
        filters:{
            timeFormater(value){
                return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss') //时间戳转换
            },
        },
      });
</script>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-text_指令</title>
    <script type="text/javascript" src="../vue_basic/vue.js"></script>
  </head>
  <body>


    <!--
            我们学过的指令:
                v-bind :单向绑定解析表达式，可简写为 :xxx
                v-model : 双向数据绑定
                V-for：遍历数组/对象/字符串
                V-on：绑定事件监听，可简写为@
                V-if：条件渲染(动态控制节点是否存存在)
                V-else ：条件渲染 (动态控制节点是否展示)V-show。

            v-text指令:
                1.作用:向其所在的节点中渲染文本内容。
                2.与插值语法的区别: v-text会替换掉节点中的内容，[{xx}}则不会
    -->

    <div id="root">
        <div>你好,{{name}}</div>
        <div v-text="name"></div>
        <div v-text="str"></div>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
            name:'修真院',
            str:'<h3>你好啊！</h3>'
        },
      });
</script>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-html_指令</title>
    <script type="text/javascript" src="../vue_basic/vue.js"></script>
  </head>
  <body>

<!--
    v-html指令:
        1.作用:向指定节点中渲染包含htm1结构的内容
        2.与插值语法的区别:
            (1).v-htm1会替换掉节点中所有的内容，{{xx}}则不会
            (2).v-htm1可以识别htm1结构。
        3。严重注意: v-htm1有安全性问题!! ! !
            (1)。在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
            (2).一定要在可信的内容上使用v-htm1，永不要用在用户提交的内容上!
 -->


    <div id="root">
        <div>你好,{{name}}</div>
        <div v-html="str"></div>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
            name:'修真院',
            str:'<h3>你好啊！</h3>'
        },
      });
</script>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-cloak_指令</title>
    <script type="text/javascript" src="../vue_basic/vue.js"></script>
  </head>
  <body>

<!--
    v-cloak指令 (没有值) :
        1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
        2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
 -->


    <div id="root">
        <h2>{{name}}</h2>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
            name:'修真院'
        },
      });
</script>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-once_指令</title>
    <script type="text/javascript" src="../vue_basic/vue.js"></script>
  </head>
  <body>

    <!-- V-once指令:
        1.v-once所在节点在初次动态渲染后，就视为静态内容了。
        2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。 -->


    <div id="root">
        <div v-once>初始化的n值是:{{n}}</div>
        <div>当前的n值是:{{n}}</div>
        <button @click="n++">点我n+1</button>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
            n:1
        },
      });
</script>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-pre_指令</title>
    <script type="text/javascript" src="../vue_basic/vue.js"></script>
  </head>
  <body>

    <!-- v-pre指令:
        1.跳过其所在节点的编译过程。
        2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。 -->


    <div id="root">
        <h2 v-pre>Vue其实很简单</h2>
        <h2>当前的n值是:{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
        el: '#root',
        data: {
            n:1
        },
      });
</script>
  </body>
</html>


上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1