一、vue是什么
vue.js官网上其实介绍的很详细
- Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
- 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
- Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
- 另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
二、vue实例
看一个vue实例
完整语法
v-on:click=”doSomething”
缩写
@click=”doSomething”
- 这是body部分的代码
<body>
<div id="root">
<div @click="handleleClick">
{{message}}
</div>
<item></item>
</div>
</body>
- script部分的代码
//vue组件 会将它编译成vue实例
Vue.component('item',{
template:'<div>hello world</div>'
})
//vue实例
var vm = new Vue({
el:'#root',
data:{
message:'hello world'
},
methods:{
handleleClick:function(){
alert("hello")
}
},
})
这是一个简单的vue实例。数据和 DOM 已经被建立了关联,所有东西都是响应式的。打开浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 message 的值,上例也会相应地更新。
- item标签内容是一个div
可以绑定元素特性
- 鼠标点击将会弹出hello
三、条件渲染
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。
- body部分的代码
<div id="app">
<!-- input会被复用,内容不会被清空,需加上key值
每次切换时,输入框都将被重新渲染 -->
<div v-if="show">
用户名:<input key="username" >
</div>
<div v-else>
邮箱名:<input key="password" >
</div>
<!-- <div v-if="show==='a'">this is a</div>
<div v-else-if="show==='b'">this is b</div>
<div v-else>this is c</div> -->
<!--带有 v-show 的元素始终会被渲染并保留在 DOM 中。
v-show 只是简单地切换元素的 CSS 属性 display-->
<!-- <div v-show="show">{{message}}</div> 性能更高 -->
</div>
- script部分的代码
var vm = new Vue({
el:"#app",
data:{
show:false,
}
})
我们不仅可以把数据绑定到 DOM 文本或特性,还可以绑定到 DOM 结构。此外,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/移除元素时自动应用过渡效果。
四、列表渲染
1、改变数组:
- 改变引用
- 调用编译方法(push,pop等)
- 用Vue.set
push 添加
pop 删除
shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回 undefined unshift:将参数添加到原数组开头,并返回数组的长度
splice(start,deleteCount,val1,val2,…):从start位置开始删除deleteCount项,并从该位置起插入val1,val2,…
sort(orderfunction):按指定的参数对数组进行排序
reverse:将数组反序
concat:返回一个新数组,是将参数添加到原数组中构成的
- body部分代码
<div id="app">
<div v-for="(item,index) of userInfo">{{item}}</div>
</div>
- script部分的代码
var vm = new Vue({
el:"#app",
data:{
userInfo:[1,2,3,4]
}
})
列表渲染
- body部分代码
<!--如果想切换多个元素呢?
此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if。
最终的渲染结果将不包含 <template> 元素。-->
<!-- template:占位符 并不会真的被渲染到页面上-->
<template v-for="(item,index) of list" :key="item.id">
<div>
{{item.text}}==={{index}}
</div>
<span>{{item.text}}</span>
</template>
- script部分代码
var vm = new Vue({
el:"#app",
data:{
list:[{
id:"1234454",
text:"hello"
},{
id:"123467",
text:"dell"
}]
}
})
对象渲染
- script部分代码
userInfo:{
name:"dell",
age:21,
gender:"male",
salary:"secret"
}
五、样式绑定
- body部分代码
<div id="app">
<div @click="handleDivClick" :class="[activated]">
hello world
</div>
</div>
- script部分的代码
var vm = new Vue({
el:"#app",
data:{
activated:""
},
methods:{
handleDivClick:function(){
this.isActivated=!this.isActivated;
}
}
})
六、模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。
- body部分的代码
<div id="app">
<!-- 插值表达式 -->
<div>{{name+' Lee'}}</div>
<!--双大括号会将数据解释为普通文本,而非 HTML 代码。
为了输出真正的 HTML,你需要使用 v-html 指令-->
<div v-text="name+' Lee'"></div>
<div v-html="name+' Lee'"></div>
</div>
- script部分的代码
var vm=new Vue({
el:"#app",
data:{
name:"<h1>Dell</h1>"
}
})