Vue基础教程,使用方法

一.引入vue.js

二.创建一个vue实例

在实例化vue的时候,有两种挂载方式

1.最常用的做法就是直接在实例化的时候利用el:"#app"来挂载元素

el:设置被操作的元素,表示vue要控制的区域,值为css选择器

data:

类型是对象

作用存放要用到的数据,数据为响应式的

三.将数据绑定到页面元素

   {{lcy}}

{{}} 意思是Mustach语法,vue中用{{}}来定义模板和数据的关联,可以是property键值,也可以是js表达式比如:{{msg?"完成":"未完成"}}

四.指令

注:使用v- 属性绑定数据是不需要双花括号包裹

1.什么是指令?

  • 具有特殊含义,拥有特殊功能的特性
  • 指令带有v-前缀,表示它们是Vue提供的特殊特性
  • 指令可以直接用data中的数据

2.基础指令

  • v-pre : 直接显示原始标签,不获取data中的值
  • v-once:只渲染一次,元素及其子节点视为静态并跳过
  • v-text:等同与{{msg}},优先级高于Mustache(v-text替换元素的所有内容,{{}}只替换自己)
  • v-html:更新元素的innerHTML(内容按普通html插入,不会作为vue模板编译)

3.条件渲染指令

  • v-if:条件性渲染一块内容
  • v-else if
  • v-else
  • v-show:根据表达式真假值,切换元素的display CSS属性

4.列表渲染指令

  • v-for:列表渲染

5.v-bind指令

  • 动态的绑定一个或多个特性,全动态,可以随data里数据改变而改变
  • 可以去除v-bind 直接写 :***, :后为传递的参数

例子:

点击切换属性:

点击更改属性:

 也可以直接绑定一个样式对象:

 修饰符:

.指名的后缀,用来指出一个指令应该以特殊方式绑定

.camel:用于绑定特性时,会将大写字母转化为小写字母

.prop:用于绑定DOM属性

.sync

6.v-on指令

v-on指令可以监听DOM事件,并在触发时运行一些javaScript代码

该指令用于监听某个元素的点击事件,执行的方法通常是在methods中定义

简写为:  @click=" " 

事件的类型由参数决定

可以接受一个需要调用的方法

事件修饰符:

  • .stop:阻止事件冒泡
  • .prevent:阻止默认事件
  • .once:执行一次
  • .self:绑定的元素本身触发时才触发回调(也能阻止事件冒泡)
  • .capture:事件捕捉模式

 按键修饰符:

  • .enter(回车键)
  • .tab
  • .delete(删除或退格)
  • .esc
  • .space(空格键)
  • .up(上建)
  • .down(下键)
  • .left(左键)
  • .right(右键)

例子:

 $event 固定写法

$event.target  事件对应的html节点

7.列表渲染

v-for:

利用v-for指令,基于数据多次渲染元素

下面分别展示v-for循环 数组和对象

v-for="(item,index) in array" 
// array 为依赖的数据,item为数组的项,index为数组的下标索引

v-for="(value,key,index) in object"
// object为js依赖的对象,value为值,key为键,index为索引

 渲染数字:

用法:n in num    参数:  n:数字,从1开始

渲染字符串:

用法:str in string   参数:str:字符串,原数据字符串中的每一个

另外:

可以利用template元素循环渲染一段包含多个元素的内容

key:管理可复用的元素,辅助vue更好的识别根节点 更好的优化渲染,建议key使用后台数据的唯一id值

8.表单绑定

v-model:

使用v-model指令在表单上,元素上创建双向数据绑定,会根据控件类型自动选取正确的方法

v-model 相当于做了两个操作:v-bind绑定一个value属性,v-on指令给当前元素绑定input事件

可以在表单元素上创建双向绑定。即数据更新,元素更新,元素更新,数据也更新

注:

v-model会忽略所有的表单元素的value,checked,selected的初始值,而是将vue实列的数据作为数据来源。

v-model表达式的初始值未能匹配任何选项,元素将渲染成为选择状态

例:

1.双向绑定:表单的输入值可以返回给实列数据

2.绑定多个复选框:

绑定到一个数组,数组中的值为被选中的value值

 

 3.绑定单选框:

被绑定的数据和value同步

4.绑定下拉列表

它会依据实列数据对表单进行匹配

 

5.修饰符:

.lazy:添加lazy修饰符,在变成change事件后进行同步

 

 .number:自动将用户的输入值变为数值类型

.trim:自动过滤用户输入的首位空白字符

9.自定义指令

1.全局自定义指令

//自定义全局的指令
Vue.directive('focus', {
     //第一个参数永远是el,表示原生的js对象
     bind: function (el) { //当指令绑定到元素上的时候,会立即执行bind函数,只执行一次,此时元素还没有插入到DOM中,focus聚焦此时不会生效
         el.focus()
     },
     inserted: function (el) { //当元素插入到DOM中的时候,会执行inserted函数,只执行一次
         el.focus()
     },
     updated: function () { //当VNode的时候,会执行updated函数,可能出发多次
     }
 });

// 使用全局自定义指令
<input type="text" class="form-control" v-model="keywords" v-focus">

2.私有自定义指令

作为和methods平级的属性定义在VM的实例中

directives: {
    'fontweight': {
        bind: function (el, bingding) {
            el.style.fontWeight = bingding.value;
        }
    },
    'fontsize': function (el, bingding) { //这个function等同于把代码写到了bind和update中去
        el.style.fontSize = parseInt(bingding.value) + 'px';
    }
}

// 在dom中使用
 <div id="app2" v-color="'pink'" v-fontweight="200" v-fontsize="20">
    <p>{{date | dateFormat}}</p>
 </div>

五.计算

computed:从现有的数据计算出新的数据

计算属性的值和data一样,可以直接使用,返回的值就是计算属性的值

计算和方法的区别:

        1.使用方法的话,每次页面重新渲染都会执行一次,计算属性不会,计算出来的数据是只读,不能修改

        2.计算属性是基于响应式依赖进行缓存的,计算属性的值一直存于缓存中,只要data数据不改变,每次访问计算属性,都会立刻返回缓存的结果,而不是在执行一次

        3.方法是每次触发重新渲染,调用方法就会执行函数

例:

 

 六.监听

watch:监听 如果数据发生变化就执行回调

监听的值类型:

  • 函数类型:监听函数,会接收两个参数,第一个参数为newVal(被改变的值),第二个参数为oldVal(赋新值之前的值)
  • 字符串类型:值为方法名字,被监听的数据改变,会执行方法

  • 对象类型:
  • handler:必须有,handle是被监听的数据改变时执行的回调函数,handler的值类型为函数/字符串类型 
  • deep:使用deep选项,可以发现对象内部的变化,将deep设置为true开启深度监听     

七.模板

一个字符串模板作为Vue实例的标识使用,会替换挂载的元素,挂在元素的内容会被忽略

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值