vue.js学习(一)

vue-exercise

不定期的vue学习动态

第一天

hello world

关于一个最小的vue项目的结构

1. 导入vue

2. 创建vue实例

3. 使用插值表达式调用数据

vue基础及事件修饰符

1. 使用v-cloak可以解决闪烁问题，或者使用v-text也可以

 {{ msg }} 
        

2. 如何定义一个基本的Vue代码结构

3. 插值表达式 和 v-text 是用来数据的绑定的

4. v-html

5. v-bind Vue提供的属性绑定机制 缩写是:

6. v-on Vue提供的事件绑定机制 缩写是@

事件修饰符

代码范例

1. .stop 阻止冒泡

2. .prevent 阻止默认事件

3. .capture 添加事件侦听器时使用事件捕获模式

4. .self 只当事件在该元素本身(比如不是子元素)触发式触发回调

5. .once 事件只触发一次

跑马灯

代码范例

步骤:

1. 弄一个时间
2. 截取字符串
3. 定时循环截取

v-model

代码范例

1. v-bind 只能实现数据的单向绑定,而v-model能够实现数据双向绑定

2. v-model只能运用在表单元素中

简易计算器

代码范例

1. HTML代码结构

    +
    -
    *
    /

2. vue实例结构

var vm = new Vue({
    el: "#app",
    data: {
        n1:0,
        n2:0,
        result:0,
        opt: "-",
    },
    methods: {
        calc() {
            switch (this.opt) {
                case '+':
                    this.result = parseInt(this.n1) + parseInt(this.n2);
                    break;
                case '-':
                    this.result = parseInt(this.n1) - parseInt(this.n2);
                    break;
                case '*':
                    this.result = parseInt(this.n1) * parseInt(this.n2);
                    break;
                case '/':
                    this.result = parseInt(this.n1) /  parseInt(this.n2);
                    break;
            }
        }
    },
})

vue里面使用样式

1. 通过属性绑定为元素设置class类样式

2. 通过通过属性绑定为元素绑定style行内样式

vue指令v-for

1. v-for循环普通数组

    
索引值: {{i}} ,  内容: {{item}}

2. v-for循环对象数组

    
Id: {{ user.id }}, 姓名: {{ user.name }}

3. v-for循环对象

    
值是: {{ val }}, 键是: {{ key }}, 索引是: {{i}}

4. v-for迭代数字

注意:是从1开始的

    
我们来迭代数字吧: {{ count }}

vue指令之v-for和v-show

一般来说,v-if有更高的切换消耗而v-show有更高的初始渲染消耗.因此,如果需要频繁切换,应使用v-show, 而运行时不大可能改变的,用v-if更好

参考内容

• 最全的vue.js视频【黑马程序员】
• bootstrap-panel-not-working

niracler wechat

本文作者：niracler
本文链接： www.niracler.com/2019/03/25/vue-js学习-一/
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！