VUE.JS

 

1.双大括号表达式（用双括号获取值）

 

指令：

1：强制数据绑定 

<img v-bind:src="imageURL" > 也等于 <img :src="imageURL" >

2.绑定事件监听

　　<button v-on:click="test">绑定事件监听</button>等价于<button @click="test">绑定事件监听</button>

　传递参数的方式直接在监听的函数后面括号里加入参数

 

 

Vue计算属性

在使用计算属性的时候，有表单一定要有v-model

 数据每发生一次变化，fullName()就执行一次

 

 

 

 

 

用监视也能实现计算，但是没有计算属性简单，但是它也有很多用处

 

 

 

vue监视（watch)

 

 

 

 Vue计算属性之set  get（数据双向绑定）

数据双向绑定就是当数据发生变化的时候，试图也发生变化，视图发生变化，数据也相应发生变化,其核心时set get方法

 

计算属性高级

计算属性存在缓存，多次读取只执行一次getter计算

按照常理

<p>{{fullName2}}</p>
<p>{{fullName2}}</p>
<p>{{fullName2}}</p>

应该调用三次fullName2函数，但是实际上只调用了一次，因为第一次调用时就把数据缓存了，以后调用的时候不用去调用函数，而是在缓存里面直接读取，所以实际上只调用了一次，



vue强制绑定class,style
绑定的是字符串

 

绑定的是对象


条件渲染（v-if , v-else)

 

 


v-show也可以实现

 

 v-if v-else 和 v-show 的区别是 v-if v-else是将元素移除，而v-show是将元素隐藏

 

 

列表渲染

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
v-for遍历数组(和forEach很像）
删除元素

 

更新

 

v-for遍历对象

 

 

可以是多个参数：

<ul>
　　<li v-for="(value , name , index) in student[0]">
　　　　{{index}}.{{name}}:{{value}}
　　</li>
</ul>

 

列表的搜索和排序

 

显示过滤/排序结果

 在 项目中经常对数据进行排序和筛选，利用计算属性来做

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8 <body>
 9 <div id="app">
10     <input type="text" v-model="searchName">
11     <ul>
12         <li v-for="(stu,index) in filterStudent" :key="index">
13             {{index}}--{{stu.name}}--{{stu.age}}
14         </li>
15     </ul>
16     <button @click="setOrderType(1)">年龄升序</button>
17     <button @click="setOrderType(2)">年龄降序</button>
18     <button @click="setOrderType(0)">原本排序</button>
19 </div>
20 <script>
21     new Vue({
22         el:'#app',
23         data:{
24             searchName:'', //当表单输入值的时候，这个值也相应的改变
25             orderType:0, //0代表原本顺序  1升序 2降序
26             student:[
27                 {name:'刘牌0' , age:20},
28                 {name:'雷军0' , age:34},
29                 {name:'马化腾1' , age:40},
30                 {name:'乔布斯0' , age:100}
31             ]
32         },
33         //使用计算属性来过滤
34         computed: {
35             filterStudent(){
36                 //取出相关数据
37                 const {searchName , student , orderType} = this
38                 //定义一个最终返回的数组
39                 let filterStu;
40                 //过滤
41                 filterStu = student.filter(stu => stu.name.indexOf(searchName)!==-1)
42                 //排序
43                 if(orderType!==0){
44                     filterStu.sort(function (s1,s2) { //制定规则 ，如果返回负数则s1在前 ， 返回整数则s2在前
45                         if(orderType===2){
46                             return s2.age-s1.age
47                         }
48                         else{
49                             return s1.age-s2.age
50                         }
51                     })
52                 }
53                 return filterStu
54             }
55         },
56         methods:{
57             setOrderType(orderType){
58                 this.orderType = orderType
59             }
60         }
61 
62     })
63 </script>
64 
65 </body>
66 </html>
View Code

 

 

事件处理

监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
    <button @click="counter+=1">Add 1</button>
    <p>the button {{counter}}</p>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            counter:0
        }
    })
</script>
</body>
</html>
View Code

 

事件处理方法

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
    <button @click="one">One</button>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
           name:'刘牌'
        },
        methods:{
          one:function (event) {
              alert('你好'+this.name+'!')
              if (event){
                  alert(event.target.tagName)
              }
          }
        }
    })

</script>
</body>
</html>
View Code

 

表单数据的自动收集

复选框

多个复选框，绑定到同一个数组：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id='example-3'>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
</div>

<script>
    new Vue({
        el: '#example-3',
        data: {
            checkedNames: []
        }
    })
</script>
</body>
</html>
View Code

单选按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <div id="example-4">
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ picked }}</span>
    </div>

<script>
    new Vue({
        el: '#example-4',
        data: {
            picked: ''
        }
    })
</script>
</body>
</html>
View Code

 

 

下拉选择框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="example-5">
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<script>
    new Vue({
        el: '#example-5',
        data: {
            selected: ''
        }
    })
</script>
</body>
</html>
View Code

用 v-for 渲染的动态选项：

 

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            selected: 'A',
            options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ]
        }
    })
</script>
</body>
</html>
View Code

 

 

 

过渡 & 动画

用到时再查,有很多很炫酷的东西

 

 

posted @ 2019-05-18 23:30  苏格拉的底牌  阅读(295)  评论(0)  编辑  收藏  举报