vue 随笔一

官方网站：

中文：https://cn.vuejs.org/

2.x版本

基本使用

 1 1. vue的使用要从创建Vue对象开始
 2    var vm = new Vue();
 3    
 4 2. 创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员
 5 <script>    
 6 window.onload = function(){
 7      var vm = new Vue({
 8      el:"#app",
 9           data: {
10          数据变量:"变量值",
11          数据变量:"变量值",
12          数据变量:"变量值",
13      },
14    });
15 }
16 </script>   
17    el:设置vue可以操作的html内容范围，值一般就是css的id选择器。
18    data: 保存vue.js中要显示到html页面的数据。
19    
20 3. vue.js要控制器的内容外围，必须先通过id来设置。
21   <div id="app">
22       <h1>{{message}}</h1>
23       <p>{{message}}</p>
24   </div>

常用指令

 1 1. 可以在普通标签中使用{{  }} 或者 v-html 来输出data里面的数据
 2    <h1>{{message}}</h1>
 3    
 4 2. 可以在表单标签中使用v-model属性来输出data里面的数据，同时还可以修改data里面的数据
 5    <input type="text" v-model="username">
 6 <!-- 操作属性 -->
 7 <标签名 :标签属性="data属性"></标签名>
 8 <!-- 事件绑定 -->
 9 <button v-on:click="num++">按钮</button>   <!-- v-on 是vue1.x版本的写法 -->
10 <button @click="num+=5">按钮2</button>
11 
12 <body>
13     <div id="box">
14         <button @click="++num">+</button>
15         <input type="text" v-model="num">
16         <button @click="sub">-</button>
17     </div>
18 
19     <script>
20         let vm = new Vue({
21             el:"#box",
22             data:{
23                 num:0,
24             },
25             methods:{
26                 sub(){
27                     if(this.num<=1){
28                         this.num=0;
29                     }else{
30                         this.num--;
31                     }
32                 }
33             }
34         })
35     </script>
36 </body>

条件渲染指令

vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。

v-if

  标签元素：
      <!-- vue对象最终会把条件的结果变成布尔值 -->
            <h1 v-if="ok">Yes</h1>
  data数据：
        data:{
            ok:false    // true则是显示，false是隐藏
      }

v-else

v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

  标签元素：
            <h1 v-if="ok">Yes</h1>
            <h1 v-else>No</h1>
  data数据：
        data:{
            ok:false    // true则是显示，false是隐藏
      }

v-else-if

可以出现多个v-else-if语句，但是v-else-if之前必须有一个v-if开头。后面可以跟着v-else，也可以没有。

  标签元素：
            <h1 v-if="num==1">num的值为1</h1>
            <h1 v-else-if="num==2">num的值为2</h1>
          <h1 v-else>num的值是{{num}}</h1>
  data数据：
        data:{
            num:2
      }

v-show

用法和v-if大致一样，区别在于2点：

v-show后面不能v-else或者v-else-if
v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]

  标签元素：
            <h1 v-show="ok">Hello!</h1>
  data数据：
        data:{
            ok:false    // true则是显示，false是隐藏
      }

列表渲染指令

在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。

数据是数组：        
        <ul>
            <!--book是列表的每一个元素-->
            <li v-for="book in book_list">{{book.title}}</li>
        </ul>

        <ul>
            <!--book是列表的每一个元素，index是每个元素的下标-->
            <li v-for="book, index in book_list">第{{ index+1}}本图书：{{book.title}}</li>
        </ul>


        <script>
            var vm1 = new Vue({
                el:"#app",
                data:{
                    book_list:[
                        {"id":1,"title":"图书名称1","price":200},
                        {"id":2,"title":"图书名称2","price":200},
                        {"id":3,"title":"图书名称3","price":200},
                        {"id":4,"title":"图书名称4","price":200},
                    ]
                }
            })
        </script>

数据是对象：
        <ul>
            <!--i是每一个value值-->
            <li v-for="value in book">{{value}}</li>
        </ul>
        <ul>
            <!--i是每一个value值,j是每一个键名-->
            <li v-for="attr, value in book">{{attr}}:{{value}}</li>
        </ul>
        <script>
            var vm1 = new Vue({
                el:"#app",
                data:{
                    book: {
                        // "attr":"value"
                        "id":11,
                        "title":"图书名称1",
                        "price":200
                    },
                },
            })
        </script>

Vue 过滤器

使用Vue.filter()进行全局定义

Vue.filter("RMB1", function(v){
      //就是来格式化(处理)v这个数据的
      if(v==0){
            return v;
      }

      return v+"元";
})

在vue对象中通过filters属性来定义

var vm = new Vue({
  el:"#app",
  data:{},
  filters:{
    RMB2:function(value){
      if(value==''){
        return;
      }else{
          return '¥ '+value;
      }
    }
    }
});

计算属性

应用场景：在需要产生一个新的变量时

var vm = new Vue({
            el:"#app",
            data:{
                str1: "abcdefgh"
            },
            computed:{   //计算属性：里面的函数都必须有返回值
                strRevs: function(){
                    var ret = this.str1.split("").reverse().join("");
                    return ret
                }
            }
        });

监听属性

var vm = new Vue({
            el:"#app",
            data:{
                num:20
            },
            watch:{
                num:function(newval,oldval){
                    //num发生变化的时候，要执行的代码
                    console.log("num已经发生了变化！");
                }
            }
        })

阻止时间冒泡和刷新页面

posted @ 2019-11-05 17:36 穆澄阅读(261) 评论(0) 收藏举报

刷新页面返回顶部

穆澄のblog