vue

vue基础知识点

2018-12-04  本文已影响0人  腹黑De狼

前提:部分内容引用于https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5

实例1:

<div id="app"> {{ message }}</div>

var app =new Vue({

      el:'#app',//绑定组件

      data: {//数据

        message:'Hello Vue!'

      }

})

知识点:通过new Vue创建实例,el绑定组件,data进行数据动态赋值。(即响应式

el就是值作用范围,只能指向一个对象(可以是id选择器或者class选择器)

指令带有前缀v-,以表示它们是 Vue 提供的特殊特性。

常用指令例子

v-on 指令添加一个事件监听器↓

v-on:click 点击事件绑定,可简写成@click  例:v-on:click(fun)    这样就绑定了'fun'的点击事件了。

v-model(双向绑定,即其中一方改变值,另一方也随之改变)

v-show  绑定的值为true则显示,为false则隐藏

v-hide  绑定的值为true则隐藏,为false则显示

v-if 绑定的值为true则显示,为false则隐藏

(v-if和v-show的用法区别:https://www.jianshu.com/p/4128c399d32c)

v-for //动态渲染格式为 (自定义数据名,下标) in 数据/集合 {{这些写的是自定义数据名}}

         例:<li v-for="value in arr">{{value}}</li>

v-bind(绑定元素)其中一种写法

2018.12.4----------------------

上一篇下一篇

猜你喜欢

热点阅读