15.Vue①
目录
1、基本数据渲染和指令v-bind 2、双向数据绑定v-model
3、事件v-on 4、修饰符.prevent 5、条件渲染v-if 6、列表渲染v-for
一、介绍
1、Vue.js 是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
官方网站:https://cn.vuejs.org
2、初始Vue.js
创建 demo.html
<!-- id标识vue作用的范围 --> <div id="app"> <!-- {{}} 插值表达式,绑定vue中的data数据 --> {{ message }} </div> <script src="vue.min.js"></script> <script> // 创建一个vue对象 new Vue({ el: '#app',//绑定vue作用的范围 data: {//定义页面中显示的模型数据 message: 'Hello Vue!' } }) </script>
这就是声明式渲染:Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
这里的核心思想就是没有繁琐的DOM操作,例如jQuery中,我们需要先找到div节点,获取到DOM对象,然后进行一系列的节点操作
在vs code中创建代码片段:
文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段:vue-html.code-snippets
注意:制作代码片段的时候,字符串中如果包含文件中复制过来的“Tab”键的空格,要换成“空格键”的空格
{ "vue htm": { "scope": "html", "prefix": "vuehtml", "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "", "<head>", " <meta charset=\"UTF-8\">", " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">", " <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">", " <title>Document</title>", "</head>", "", "<body>", " <div id=\"app\">", "", " </div>", " <script src=\"vue.min.js\"></script>", " <script>", " new Vue({", " el: '#app',", " data: {", " $1", " }", " })", " </script>", "</body>", "", "</html>", ], "description": "my vue template in html" } }
新建html文件,输入vuehtml即可弹出模板,在模板上更改即可。
二、基本语法
1、基本数据渲染和指令v-bind
创建 01-基本数据渲染和指令.html
你看到的 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
创建 02-双向数据绑定.html
双向数据绑定和单向数据绑定:使用 v-model 进行双向数据绑定
data: { searchMap:{ keyWord: '尚硅谷' } } <!-- 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、事件v-on
创建 03-事件.html
需求:点击查询按钮,按照输入框中输入的内容查找公司相关信息
在前面的例子基础上,data节点中增加 result,增加 methods节点 并定义 search方法
data: { searchMap:{ keyWord: '尚硅谷' }, //查询结果 result: {} }, methods:{ search(){ console.log('search') //TODO } }
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>
完善search方法
search(){ console.log('search'); this.result = { "title":"尚硅谷", "site":"http://www.atguigu.com" } }
简写
<!-- v-on 指令的简写形式 @ -->
<button @click="search()">查询</button>
4、修饰符.prevent
创建 04-修饰符.html
修饰符 (Modifiers) 是以半角句号(.)指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
即阻止事件原本的默认行为
data: { user: {} } <!-- 修饰符用于指出一个指令应该以特殊方式绑定。 这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault(): 即阻止表单提交的默认行为 --> <form action="save" v-on:submit.prevent="onSubmit"> <label for="username"> <input type="text" id="username" v-model="user.username"> <button type="submit">保存</button> </label> </form> methods: { onSubmit() { if (this.user.username) { console.log('提交表单') } else { alert('请输入用户名') } } }
5、条件渲染v-if
创建 05-条件渲染.html
v-if:条件指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <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> </div> <script src="vue.min.js"></script> <script> new Vue({ el: '#app', data: { ok:false } }) </script> </body> </html>
6、列表渲染v-for
创建 06-列表渲染.html
v-for:列表循环指令
例1:简单的列表渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="n in 10">{{n}}</li> </ul> <ol> <li v-for="(n,index) in 10">{{n}}---{{index}}</li> </ol> <hr/> <table border="1"> <tr v-for="user in userList"> <td>{{user.id}}</td> <td>{{user.username}}</td> <td>{{user.age}}</td> </tr> </table> </div> <script src="vue.min.js"></script> <script> new Vue({ el: '#app', data: { userList: [ { id: 1, username: 'helen', age: 18 }, { id: 2, username: 'peter', age: 28 }, { id: 3, username: 'andy', age: 38 } ] } }) </script> </body> </html>