一、介绍
1. Vue.js 是什么
Vue是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 官方网站:https://cn.vuejs.org
2. Vue声明式渲染
< ! -- id标识vue作用的范围 -- >
< div id= "app" >
< ! -- { { } } 插值表达式,绑定vue中的data数据 -- >
{ { message } }
< / div>
< script src= "vue.min.js" > < / script>
< script>
new Vue ( {
el: '#app' ,
data: {
message: 'Hello Vue!'
}
} )
< / script>
这就是声明式渲染 :Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统这里的核心思想就是没有繁琐的DOM操作,例如jQuery中,我们需要先找到div节点,获取到DOM对象,然后进行一系列的节点操作
二、基本语法
1. 基本数据渲染和指令
你看到的 v-bind 特性被称为指令。指令带有前缀 v- 除了使用插值表达式{{}}进行数据渲染,也可以使用 v-bind指令,它的简写的形式就是一个冒号 :
data: {
content: '我是标题' ,
message: '页面加载于 ' + new Date ( ) . toLocaleString ( )
}
< ! -- 如果要将模型数据绑定在html属性中,则使用 v- bind 指令
此时title中显示的是模型数据
-- >
< h1 v- bind: title= "message" >
{ { content} }
< / h1>
< ! -- v- bind 指令的简写形式: 冒号(: ) -- >
< h1 : title= "message" >
{ { content} }
< / h1>
2. 双向数据绑定
双向数据绑定和单向数据绑定:使用 v-model 进行双向数据绑定
data: {
searchMap: {
keyWord: 'CSDN'
}
}
< ! -- v- bind: value只能进行单向的数据渲染 -- >
< input type= "text" v- bind: value= "searchMap.keyWord" >
< ! -- v- model 可以进行双向的数据绑定 -- >
< input type= "text" v- model= "searchMap.keyWord" >
< p> 您要查询的是:{ { searchMap. keyWord} } < / p>
3. 事件
需求:点击查询按钮,按照输入框中输入的内容查找公司相关信息 在前面的例子基础上,data节点中增加 result,增加 methods节点 并定义 search方法
data: {
searchMap: {
keyWord: '尚硅谷'
} ,
result: { }
} ,
methods: {
search ( ) {
console. log ( 'search' ) ;
this . result = {
"title" : "CSDN" ,
"site" : "https://www.csdn.net/m"
}
}
}
html中增加 button 和 p 使用 v-on 进行数件处理,v-on:click 表示处理鼠标点击事件 ,事件调用的方法定义在 vue 对象声明的 methods 中
< ! -- v- on 指令绑定事件,click指定绑定的事件类型,事件发生时调用vue中methods节点中定义的方法 -- >
< button v- on: click= "search()" > 查询< / button>
< p> 您要查询的是:{ { searchMap. keyWord} } < / p>
< p> < a v- bind: href= "result.site" target= "_blank" > { { result. title} } < / a> < / p>
4. 条件渲染
data: {
ok: false
}
< input type= "checkbox" v- model= "ok" > 同意许可协议
< ! -- v: if 条件指令:还有v- else 、v- else - if 切换开销大 -- >
< h1 v- if = "ok" > if :Lorem ipsum dolor sit amet. < / h1>
< h1 v- else > no< / h1>
5. 列表渲染
例1:简单的列表渲染
< ! -- 1 、简单的列表渲染 -- >
< ul>
< li v- for = "n in 10" > { { n } } < / li>
< / ul>
< ul>
< ! -- 如果想获取索引,则使用index关键字,注意,圆括号中的index必须放在后面 -- >
< li v- for = "(n, index) in 5" > { { n } } - { { index } } < / li>
< / ul>
例2:遍历数据列表
data: {
userList: [
{ id: 1 , username: 'helen' , age: 18 } ,
{ id: 2 , username: 'peter' , age: 28 } ,
{ id: 3 , username: 'andy' , age: 38 }
]
}
< ! -- 2 、遍历数据列表 -- >
< table border= "1" >
< tr v- for = "(item, index) in userList" >
< td> { { index} } < / td>
< td> { { item. id} } < / td>
< td> { { item. username} } < / td>
< td> { { item. age} } < / td>
< / tr>
< / table>