A·Y

Vue基础语法

6/10/2020 Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链 (opens new window)以及各种支持类库 (opens new window)结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

# HelloWorld

<!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--html-->
<div id="app">
  {{ message }}
</div>
<!--js-->
<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Hello Vue!

# 条件和循环

  • v-if
  • v-for

Example

<p v-if="seen">test</p>
<ol>
  <li v-for="todo in todos">
    {{ todo.msg }}
  </li>
</ol>
<!--js-->
<script>
    let app = new Vue({
        el: '#app',
        data: {
            seen:true,
            todos:[
                {
                    id:1,
                    msg:'1的待办'
                }
            ]
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

v-for迭代对象属性

<div id="myApp">
    <h1>对象属性迭代</h1>
    <div v-for="(value, key) in obj">
        {{ key }} : {{ value }}
    </div>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            obj: {
                id:'id',
                title: "title"
            },
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 表单数据绑定

<div id="myApp">
    <p>input {{input}}</p>
    <input v-model="input">
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            input: ''
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12

表单复选框绑定

<div id="myApp">
    <p>check {{check}}</p>
    <label for="a">a</label>
    <input type="checkbox" id="a" v-model="check" value="a">
    <label for="b">b</label>
    <input type="checkbox" id="b" v-model="check" value="b">
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            check: []
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

表单单选按钮

<div id="myApp">
    <p>sex {{sex}}</p>
    <input type="radio" id="male" value="男" v-model="sex">
    <label for="male">男</label>
    <br>
    <input type="radio" id="female" value="女" v-model="sex">
    <label for="female">女</label>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            sex:'',
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

下拉框

<div id="myApp">
    <p>select {{select}}</p>
    <select v-model="select" style="width:210px;">
        <option value="1">a</option>
        <option value="2">b</option>
        <option value="3">c</option>
        <option value="4">d</option>
        <option value="5">e</option>
    </select>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            select:'',
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 事件

v-on为页面元素绑定各种事件。（keydown, keyup, click, dbclick, load, etd.）

<div id="myApp">
    <p>点击了：{{clickNum}}</p>
    <button v-on:click="btnClick('1')">1</button>
    <button @click="btnClick('2')">2</button>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            clickNum: ''
        },
        methods: {num
            btnClick: function(num){
                this.clickNum = num;
            },
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 组件

定义一个可复用的代码块

<div id="myApp">
  <ol>
    <todo v-for="todo in todos" v-bind:todo="todo"></todo>
  </ol>
</div>
<script>
// 定义全局组件
Vue.component('todo', {
  props: ['todo'],
  template: '<li>{{ todo }}</li>'
});
// 定义组件
let todoComponent = '<li>{{todo}}</li>'
var myApp = new Vue({
    el: '#myApp',
    data: {
    todos: [
        'todo1',
        'todo2',
        'todo3'
    ]
  },
    // 局部组件
    components: {
        'todo': todoComponent
    },
    
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 过滤器

格式化变量内容的输出。（日期格式化，字母大小写，数字再计算等等）

<div id="myApp">
    <p>{{message}}</p>
    <p>{{message | upMsg }}</p>
    <p>{{num}}=({{num | topercentage}})。</p>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            msg: 'hello world',
            num: 0.6
        },
        filters: {
            upMsg: function(value){
                return value.toUpperCase();
            },
            topercentage: function(value){
                return value * 100 + '%';
            },
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 计算属性

处理元数据，便于进行二次利用

<div id="myApp">
    {{num}}{{twoNum}}
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            num: 1
        },
        computed: {
            twoNum: function(){
                return this.num * 2;
            }
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

setter : 设置计算属性，同步更新元数据的值

<div id="myApp">
    num:{{num}}
    <br>
    price:{{price}}
    <button @click="btnClick(200)">price+200--->num+1</button>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            num: 1
        },
        computed: {
            price: {
                get:function () {
                    return this.num * 200
                },
                set:function (price) {
                    this.num = price / 200
                }
            }
        },
        methods:{
            btnClick:function (price) {
                this.price += 200;
            }
        }
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 观察属性

与computed属性类似，用于观察变量的变化，然后进行相应的处理。

<div id="myApp">
    <p>{{price}}</p>
    <button @click="btnClick(1)">num+1</button>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            num: 0,
            price:0,
        },
        watch: {
            num: function(newVal, oldVal){
                this.price = 200 * newVal;
            },
        },
        methods: {
            btnClick: function(n){
                this.num += n;
            },
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Class绑定

<style>
    .red{
        color: red;
    }
    .blue{
        color: blue;
    }
</style>
<div id="myApp">
    <div v-bind:class="{red:isRed}">red</div>
    <div :class="{blue:isBlue}">blue</div>
    <button @click="btnClick">true/false</button>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            isRed: true,
            isBlue: true,
        },
        methods: {
            btnClick: function(){
                this.isRed = !this.isRed;
                this.isBlue = !this.isBlue;
            },
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

绑定对象

<style>
    .red{
        color: red;
    }
</style>
<div id="myApp">
    <div :class="color">color</div>
    <button @click="btnClick">true/false</button>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            color:{
                red:true
            }
        },
        methods: {
            btnClick: function(){
                this.color.red = !this.color.red;
            },
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 条件渲染

  • v-if
  • v-else-if
  • v-else
<div id="myApp">
    <h1 v-if="score == 0">socre==0</h1>
    <h1 v-else-if="score < 2">{{score}},score<2</h1>
    <h1 v-else-if="score <= 4">{{score}},score<=4</h1>
    <h1 v-else>{{score}}, score==5</h1>
    <button @click="btnClick">get random score</button>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            score: 0
        },
        methods: {
            btnClick: function(){
                this.score = Math.round(Math.random() * 5);
            },
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 元素显示

  • v-show

v-show设置的标记在html DOM中不会消失(if是删除dom,show是改变display)

<div id="myApp">
    <h1 v-show="isShow">show</h1>
    <button @click="btnClick">change show</button>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp', 
        data: {
            isShow: true
        },
        methods: {
            btnClick: function(){
                this.isShow = !this.isShow;
            },
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 表单修饰符

  • .lazy
  • .number
  • .trim
# .lazy

用户输入内容时不做绑定数据的更新处理，在控件的onchange事件中更新绑定的变量。

用户名：<input v-model.lazy="username">
1
# .number

将用户输入的内容转换为数值类型，如果用户输入非数值的时候，则返回NaN。

年龄：<input v-model.number="age" type="number">
1
# .trim

自动去掉用户输入内容两端的空格。

意见：<input v-model.trim="content">
1

# 插槽

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案 (opens new window)，将 <slot> 元素作为承载分发内容的出口。

<div id="myApp">
    <alert-box>111</alert-box>
</div>
<script>
    Vue.component('alert-box', {
        template: `
    <div class="demo-alert-box">
      <strong>后面是插槽内容---></strong>
      <slot></slot>
    </div>
  `
    })
    var myApp = new Vue({
        el: '#myApp',
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
后面是插槽内容---> 111
1

# 最后

按照惯例,最后附上官方文档 (opens new window)