Vue 入门学习

函数	Vue组件
形参	Slot,props
局部变量和局部函数	Data,methods
函数名	Name
Retrun	template

扫描二维码关注公众号，回复： 4694662 查看本文章

<template></ template>--------------------------HTML

MVVM M(当前视图中的可用数据) v(渲染UI html) vm(model和view的集合)双向数据绑定

MVC C(处理和控制数据)

el:绑定的元素

data:属性 {

name :sugang

age:12,

flage:true,

arr:[‘a’,’b’,’c’,d’’].

obj:{id:1,name:’aa’},

obj2:{id:1,name:’aa’},{id:3,name:’sugang},

}

表达式 {{}}:输出数据

指令

v-model// 双向数据绑定(用于表单，相当于value)

v-for //用于对数组和对象进行循环遍历

arr in arrs 数组

(v,i ) in arrs i:index v:value

(v,k) in arrs {{v}}-{{k}} k:key v:value

v-on:click mouseover :事件执行 @替代

v-show /v-if //显示隐藏

:是v-bind的缩写，是为了动态绑定数据。绑定属性,动态的来操作属性

绑定c33样式 css后面的把前面的覆盖

style样式</div>

<div :class="{aa:flag,bb:flag}">json方式</div>

</div>

指令大全

v-for循环

v-show 显示与隐藏

v-if显示与隐藏如果表达式成立

v-else 否则就

v-else-if 多种情况下用这个

v-model双向绑定数据

{{}}表达式自动将我们双向绑定的数据实时显示出来

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

声明式渲染

文本查值{{message}}

绑定元素特性  ：title=”message”  v-bind:将元素节点的title特性和vue实例的message属性保持一致.

toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。Thu Jun 21 2018 08:55:32 GMT+0800 (中国标准时间)——————————————2018/6/21 上午8:55:32

条件与循环

v-if v-for

app4.todos.push({ text: '新项目' })push()在数组后追加元素

处理用户输入

逆转消息v-on:click 添加事件监听器 ，调用自定义的方法

this.message.split('').reverse().join('')逆转消息

v-model：轻松实现表单输入和应用状态之间的双向绑定。

组件化应用构建

Js

// 定义名为 todo-item 的新组件

Vue.component('todo-item', {

  template: '<li>这是个待办项</li>'

})

HTMl

<ol>

  <!-- 创建一个 todo-item 组件的实例 -->

  <todo-item></todo-item>

</ol>

V-text  v-html

 解决浏览器闪烁问题 (必须配置css样式，否则不生效)

<div v-cloak>{{msg}}</div>

Css中 [v-cloak]{display:none}

<div v-html></div>        <div v-text ></div>

Event

v-on或者 @click

事件冒泡:子元素的事件传递到父元素

修饰符

Stop:

底层是e.stopPropagation()

阻止冒泡：v-on:click.stop="show3(event)"阻止事件冒泡

Prevent：

@click.prevent="open($event)"

阻止默认的动作：e.preventDefault();取消事件的默认的动作

Once :

@click.once="open($event)"

点击只执行1次 e.stopPropagation(),点完阻止事件

键盘事件 @keydowun.enter 按键后+回车

@keydowun.a 按键后+a

过滤器

{{3.1415926 | number}}

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

计算属性(引用+缓存)

vue实例常用属性

（1）.data：Vue实例的数据对象

Components:Vue实例配置局部注册组件

（2）.类方法

Computed:计算属性

Watch:侦听属性

Fiters：过滤器

Methods:Vue实例方法

Render:渲染函数，创建虚拟DOM

（3）.生命周期

Created:在实例创建完成后被立即调用，完成初始化操作

Mounted:el挂载到Vue实例上了，开始业务逻辑操作

BeforeDestroy:实例销毁之前调用

Vue组件

Props:用于接收来自父组件的数据

Template：组件模板

猜你喜欢