了解Vue,Vue的基础语法

目录:

  • 1. 模板语法
    • 1.1 插值
      • 1.1.1 文本
      • 1.1.2 html
      • 1.1.3 属性
      • 1.1.4 表达式
    • 1.2 指令
      • 1.2.1 核心指令
        • 1.2.1.1 v-if |v-else-if|v-else
        • 1.2.1.2 v-show
        • 1.2.1.3 v-for
        • 1.2.1.4 v-on|v-model|v-for
        • 1.2.1.5 参数 v-bind:href,v-on:click
        • 1.2.1.6 简写
  • 2. 过滤器
    • 2.1 局部过滤器
    • 2.2 全局过滤器
  • 3. 计算属性
  • 4.监听属性

 1. 模板语法

 

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom,
结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。

html模板语法:
这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。

 1.1 插值

1.1.1 文本

使用{{msg}}的形式,标签将会被替换成为数据对象(data)上msg属性值,当绑定的数据对象上的msg属性值发生变化时,插值处的值也会发生变化(双向绑定)
示例:上节课的hello vue示例使用的就是插值。

1.1.2 html

{{}}的方式将数据处理为普通文本,如果要输出html,需要使用v-html指令
示例:
在data中定义一个html属性,其值为html

data: {
    html:  ''
}

在html中取值

1.1.3 属性

HTML属性中的值应使用v-bind指令。类型与jQuery中的$("#xxx").attr(propName, propVal)
示例,以修改元素的class属性为例:
定义一个样式

 在data中定义一个属性,其值为上面定义的样式名

data: {
    red: 'redClass'
}

在html使用v-bind指令设置样式

设置之前: aaaa

设置之后: aaa

在浏览器中可以看到相应的效果

几种常见的表达式:

  • {{str.substr(0,6).toUpperCase()}}
  • {{ number + 1 }}
  • {{ ok ? 'YES' : 'NO' }} 三元运算符
  • 我的Id是js动态生成的

示例1:
在html中加入元素,定义表达式

{{str.substr(0,6).toUpperCase()}}

在data中加入一个属性,名为str与html中对应

data: {
    str: 'hello vue'
}

查看效果:字符串被截取,并转换为大写

示例2:

{{ number + 1 }}

在data中加入一个属性,名为str与html中对应

data: {
    number: 10
}

在data中定义的number值将会被加1

示例3:
这是一个三元运算,如果ok为true,表达式值为YES ,如果ok为false则表达式值为NO

{{ ok ? 'YES' : 'NO' }}

在data中加入一个属性,名为str与html中对应

data: {
    ok: true
}

示例4:
演示id属性绑定和动态赋值


data: {
    bookId: 'book001',
    id: 'book002'
}

该示例可以通过开发者工具查看生成的id属性值。

1.2 指令

指令指的是带有“v-"前缀的特殊属性

1.2.1 核心指令

1.2.1.1 v-if |v-else-if|v-else

根据其后表达式的bool值进行判断是否渲染该元素, 指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)
示例:
HTML

type == A
type == B
other value

JS

    var vm = new Vue({

        el: '#app',

        data: {
            type: 'C'
        }
    });

可以修改data中的type值观察页面的输出。

注: js = == === 之间的区别
一个等号是赋值操作,==先转换类型再比较,===先判断类型,如果不是同一类型直接为false
alert(1 == “1”); // true
alert(1 === “1”); // false

1.2.1.2 v-show

与v-if类似,只是不会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style="display:none"。
当v-show 表达式true则显示,否则不显示。
注意:使用v-show,虽然不显示,但在页面的dom中是存在的,只是display属性为none
示例: 在HTML中加入如下内容

show == yes

在data中定义show属性

var vm = new Vue({
    el: '#app',
    data: {
        show: 'yes' 
    }
});

修改show值,观察页面显示

1.2.1.3 v-for

循环遍历

  • 遍历数组: v-for="item in items", items是数组,item为数组中的数组元素
  • 遍历对象: v-for="(value,key,index) in stu", value属性值, key属性名,index下标
    示例:
    定义一个div,使用v-for指令输出,items是vue实例中data中定义的对象数组

{{item.name}} -- {{item.id}}
{{key}}-{{o}}
var vm = new Vue({

    el: '#app',

    data: {
        itmes:[
            {name: 'zs',age:18},
            {name: 'ww',age:19},
            {name: 'ls',age:20},
            {name: 'zl',age:21}
        ],
        obj: {
            name:'张三',
            age: 21,
            addr: '湖南长沙'
        }
    }
});

1.2.1.4 v-on|v-model|v-for

创建一组多选框,可以获取到用户选择项


{{index}}:{{item.name}}
var vm = new Vue({

    el: '#app',

    data: {
        type: 'C',
        show: 'no',
        items:[
            {name: '长沙',id:18},
            {name: '昆明',id:19},
            {name: '武汉',id:20},
            {name: '南京',id:21}
        ],
        obj: {
            name:'张三',
            age: 21,
            addr: '湖南长沙'
        },
        selected:[]
    },
    methods: {
        getSelected: function() {
            console.log(this.selected);
        }
    }
});

1.2.1.5 参数 v-bind:href,v-on:click

示例:





baidu

注意:在动态参数中,作为参数的变量名(如:attrname)要全部小写,否则无效 !!

var vm = new Vue({

    el: '#app',

    data: {

        url: 'https://www.baidu.com',
        attrname:'href',
        evname: 'click'
    },

    methods: {
        clickme: function() {
            console.log("点到我了");
        }
    }

});

1.2.1.6 简写

Vue为v-bind和v-on这两个最常用的指令,提供了特定简写

指令 简写 示例
v-bind:xxx :xxx v-bind:href 简写为 :href
v-on:xxx @xxx v-on:click 简写为 @click

2. 过滤器

vue允许自定义过滤器,一般用于常见的文本格式化,过滤器可用的两个地方:双花括号插值v-bind表达式,过滤器应该被添加在js表达式的尾部,使用管道运算符"|"

2.1 局部过滤器

局部过滤器的定义:

var vm = new Vue({
    filters: {
        'filterName': function(value) {
            //过滤器实现
        }
    }
});

过滤器的使用


{{ name | capitalize }}


  • 注1:过滤器函数接受表达式的值作为第一个参数
  • 注2:过滤器可以串联
    {{ message | filterA | filterB }}
  • 注3:过滤器是JavaScript函数,因此可以接受参数:
    {{ message | filterA('arg1', arg2) }}

示例:

{{msg | toUpperCase}}

var vm = new Vue({

    el: '#app',

    data: {
        msg:"hello vue"
    },

    //局部过滤器
    filters:{
        toUpperCase: function(value) {
            return value.toUpperCase();
        }
    }

});

2.2 全局过滤器

拷入date.js(日期格式化)放入项目js目录中,在页面中引入。
定义全局过滤器

//全局过滤器
Vue.filter('fmtDate',function(value) {
    return fmtDate(value, 'yyyy年MM月dd日')
});

过滤器的使用

{{date | fmtDate}}

3. 计算属性

计算属性用于快速计算视图(View)中显示的属性,这些计算将被缓存,并且只在需要时更新
使用场景:当一个属性需要复杂的逻辑运算之后才能获取其值,可以使用计算属性,在一个计算属性中可以完成各种复杂的逻辑,包括运算,方法调用等,只要最终返回一个结果就可以了
声明计算属性的格式:

computed:{
   xxx:function(){

   }
}

示例: 使用计算属性,计算书本的总价
定义测试数据,和计算属性,计算属性遍历书本记录,计算总价

var vm = new Vue({

    el: '#app',

    data: {
        //定义测试数据
        books: [
            {name:'红楼梦', price:"120"},
            {name:'三国演义', price:"100"},
            {name:'水浒传', price:"90"},
        ]
    },

    //计算属性
    computed: {
        compTotal: function() {
            let sum = 0;
            for(index in this.books) {
                sum += parseInt(this.books[index].price);
            }
            return sum;
        }
    }

});

计算属性在页面中的使用

{{book.name}} -> {{book.price}}
总价:{{compTotal}}

关于var 与 let

  • var声明为全局属性
  • let为ES6新增,可以声明块级作用域的变量(局部变量)
  • 建议使用let声明变量

4.监听属性

使用场景:我们可以使用监听属性watch来响应数据的变量, 当需要在数据变化时执行异步或开销较大的操作时,这种方式比较有用。回想一下是否做过下拉列表的级联选择?

watch声明语法:

watch: {
    xxxx: function(val) {
        //监听器实现
    }
}

示例: 米和厘米的单位换算
设置监听器:

var vm = new Vue({

    el: '#app',

    data: {
        m: 1,
        cm: 100
    },

    //设置监听属性
    watch: {
        m: function(val) {
            if(val)
                this.cm = parseInt(val) * 100;
            else
                this.cm = "";
        },
        cm: function(val) {
            if(val)
                this.m = parseInt(val) / 100;
            else
                this.m = "";
        }
    }

});

HTML中使用v-model实现与数据的双向绑定

米: 厘米:

你可能感兴趣的:(大数据)