1.vue init
- 初始化vue ,创建main.js 创建app.vue,创建router/index.js
- 在main.js中引入组件，之后在此处引入框架声明
import vue from 'vue' import APP from './app.vue' import router from './router' 复制代码 - 在
app.vue模版中- 每个vue文件 定义一个根div
- app.vue 的根div中，有占位
<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> 复制代码
- 在
main.js文件中-
在
main.js中init Vue1个项目是一个Vue实例初始化new Vue({}) -
el:#app目的地，入口是#app -
router:router,ES6之后，key 和value 相同可以省略key, ```Vue Vue.config.productionTip = falseVue.use(Vuex) Vue.use(ElementUI) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) ``` 复制代码
-
- 变量的导出 导入
- 默认导出
export default temp1对应导入import xxx from './xx.js' - 声明式导出
- export var obj1 = '声明式导出1'
- export var obj2 = '声明式导出2'
- var obj3 = '声明式导出3' export {obj3}
- 导入：
import {obj1,obj2} from './xxx.js'
- 默认导出
2.值绑定 v-model v-for
-
绑定到UI 在模版内使用实例的属性不需要使用this，直接使用
{{text}}- 在
<script></script>标签内export default ({实例}) - 实例右data 属性，data:funcction(){ return 对象}
- 也可以写成data(){return 对象}
export default { //配置 // 类似$scope.xxx = '初始化' // data:function(){ // }, data(){ return { //放数据的地方 text:'大家好', list:[{name:'jack'},{name:'rose'}] } } } 复制代码 - 在
-
绑定到实例属性 使用
v-model<input type='text' v-model="text">- 文本输入到data 内的text属性中。再绑定到{{text}} UI中
-
列表的数据绑定
v-for in结合li 和td 一起使用<li v-for='person in list'>{{person.name}}</li>- list是data的list对象数组 person是其中一个对象，绑定person.name到每一个li标签上面
3.vue指令简单介绍
v-text是元素的innerText只能在双标签中使用<span v-text='text1'></span>和<span>{{text1}}</span> 等价
v-html是元素的innerHTML，插入带标签的html 不能包含{{xxx}}v-show元素是否显示或隐藏 等价操作dispaly属性 触发又过渡效果v-if元素是否移除或插入 按条件进行渲染标签v-else条件渲染和v-ifv-else-if结合使用v-for列表渲染 优先级大于v-ifv-on绑定时间监听器 可以简写为@<button @click="clickfunc"></button>
v-bind绑定一个或多个属性到表达式 简写为:<img :src="imageSrc"><img v-bind:src="imageSrc">
v-modle数据绑定到UI 在表单控件或组件上双向绑定v-pre跳过这个元素和子元素的编译过程，加快编译v-cloak这个指定一直关联元素上知道编译结束 结合css中display:none[v-cloak] { display: none; } 复制代码<div v-cloak> {{ message }} </div> 复制代码v-once只渲染元素和组件一次
4.vue 绑定class
- 使用
v-bind:class=表达式 - 1对1
<div v-bind:class="{ active: isActive }"></div> 复制代码data: { isActive: true, hasError: false } 复制代码 - 1对多 和普通的class共存
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> 复制代码 - 1选择1 再v-for 中，单/双行不同背景色，
<p :class="{'colom2':true,'backg1':index%2==0,'backg2':index%2==1}"> {{Number(amode.riskRatio * 100).toFixed(2)}}%</p> 复制代码 - 也可以从一个对象中根据不同key取处不同的value class
<ul> <li v-for="stu in stus" :class="{'A':'red','B':'green'}[stu.score]"> {{stu.name}} </li> </ul> 复制代码
5.vue 的v-on click
-
修饰符 .stop .prevent .capture .self .native .once .left .right .middle .passive
-
v-on:click可以简写为@click<button v-on:click="isRed = !isRed">点我大变化</button> <button @click="change">点我大变化</button> 复制代码data(){ return { isRed:false, stus:[{name:'jack',score:'A'},{name:'rose',score:'B'}] } }, //声明函数，属于组件对象的 methods:{ //包含多个函数名做key，函数体做value change(){ //在script中能使用的对象，基本template中也能使用，但是 //在script中加this,template中不需要this this.isRed = !this.isRed; this.stus.push({ name:'mick',score:'A' }) } } 复制代码 -
内联语句 传入参数
<button v-on:click="doThat('hello', $event)"></button> 复制代码 -
停止冒泡 阻止单击事件继续传播
<button @click.stop='stopAction'></button> 复制代码 -
阻止默认行为
<button @click.prevent='preventAction'></button> 复制代码 -
阻止默认行为没有表达式 提交事件不再重载页面
<form @submint.prevent></from> 复制代码 -
串联修饰符
<button @click.stop.prevent></button> 复制代码 -
键修饰符 键盘别名 有
.enter.tab.delete.esc.down.up.left.right.space<input @keyup.enter='enterAction'> 复制代码 -
键修饰符 键盘码
<input @keyup.13='enterAction'> 复制代码 -
点击只会触发一次
<button @click.once='clickAction'></button> 复制代码 -
对象语法 {系统方法名a:自定义方法a,系统方法名b:自定义方法b,}
<button @click="{mousedown:downAction,mouseup:upAction}"></button> 复制代码 -
添加事件监听器时使用事件捕获模式
-
即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
<div @click.capture='captureAction'></div> 复制代码 -
修饰符self 只当在 event.target 是当前元素自身时触发处理函数,点击的是自己，不是子试图 即事件不是从内部元素触发的
<button @click.self='selfAction'><button> 复制代码 -
@click.self.prevent阻止自己元素的点击@click.prevent.self组织所有的点击
6.vue 的v-for 列表渲染
-
v-for使用item in items语法 items 是源数据数组，item是数据数组中迭代的别名 -
可以使用
(item ,index) in items第二个参数为顺序index -
一个对象的v-for value
<li v-for="value in object">绑定的是对象属性对应的值。 无序的。- 也可以使用
<li v-for="(value, key) in object">
<li v-for="value in object"> {{ value }} </li> 结果为： John Doe 30 复制代码new Vue({ el: '#v-for-object', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } }) 复制代码 -
数据源的更改方法 刷新UI
psuh()pop()shift()unshift()sort()reverse()splice() -
数据源不改变UI的方法
filter()concat()slice()这些不刷新UI的方法，进行重新赋值数据源 整个替换example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) }) 复制代码 -
删除某个数据
del(index){ this.heros.splice(index,1); } 复制代码 -
注意事项 数组中
vm.items[indexOfItem] = newValue和vm.items.length = newLength进行修改是不会触发刷新，用Vue.set(vm.items,indexOfItem,newValue) -
对象的属性的增加删除也是不触发刷新，用
Vue.set(aobject,key,value)强制触发。 -
为已有对象赋予多个新属性 比如使用Object.assign()或者_.extend()
vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' }) 复制代码 -
显示排序/过滤结果
- 有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。
- 在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 method 方法：
<li v-for="n in even(numbers)">{{ n }}</li> 复制代码data: { numbers: [ 1, 2, 3, 4, 5 ] }, methods: { even: function (numbers) { return numbers.filter(function (number) { return number % 2 === 0 }) } } 复制代码
-
取一段范围的v-for
<span v-for='n in 10'>{{n}}</span> -
v-for on a <template>类似于 v-if，你也可以利用带有 v-for 的<template>渲染多个元素 table 的cell<ul> <template v-for='item in items'> <li>{{item.name}}</li> <li>{{item.age}}</li> </template> </ul> 复制代码 -
v-forwithv-if- v-for 比 v-if 优先级高，即在for的每个子项中 都会查询v-if
<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li> 复制代码
- v-for 比 v-if 优先级高，即在for的每个子项中 都会查询v-if
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
