一丶介绍
1.vue是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官方网站：https://cn.vuejs.org
2、初始Vue.js
创建文件夹vue.js
创建demo.html
<!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> <!-- 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> </body> </html>
这就是声明式渲染：Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统
这里的核心思想就是没有频繁的DOM操作，例如Jquery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的单点操作
二丶基本语法
1.基本数据渲染和指令
创建 01-基本数据渲染和指令.html
你看到的v-bind特性被称之为指令。指令带有前缀v-
除了使用插值表达式{{}}进行数据的渲染，也可以使用v-bind指令，它的简写的形式就是一个冒号（：）
<!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> <!-- id标识着Vue的作用范围 --> <div id=app> <!-- {{}}插值表达式，绑定vue中的data中的数据 --> {{message}} <h1>一级标题</h1> <!-- 如果要将模型数据绑定到html属性中，则使用v-bind指令 此时title中显示的是模型数据 --> <h1 v-bind:title="message">一级标题</h1> <!-- v-bind指令的简写形式是：冒号(:) --> <h1 :title="message">一级标题</h1> </div> <script src='vue.min.js'></script> <script> //创建一个vue new Vue({ el: '#app', //绑定vue的作用范围 data:{ //定义页面中显示的模型数据 message:'页面加载于' + new Date().toLocaleString() } }) </script> </body> </html>
2.双向数据绑定
创建 02-双向数据绑定.html
双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定
<!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"> <!-- v-bind:value只能进行单向数据绑定 --> <input type="text" v-bind:value="keyword"> <!-- v-model:value可以进行双向数据绑定 --> <input type="text" v-model:value="keyword"> <p>{{keyword}}</p> </div> <script src="vue.min.js"></script> <script> new Vue({ el: '#app', data: { keyword:'你在世界的那个地方？' } }) </script> </body> </html>
3、事件
创建 03-事件.html
<!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"> <!-- v-on指令绑定事件，click指绑定事件的类型，事件发生时调用vue中的methods节点中定义的方法 --> <button v-on:click="search()">查询</button> <!-- 绑定事件指令可以使用@click来简写 --> <button @click="search()">查询2</button> <p>查询结构是：</p> <br> <!-- 加上：动态的去绑定 --> <a :href="result.site">{{result.name}}</a> <br> {{result.cite}} <br> </div> <script src="vue.min.js"></script> <script> new Vue({ el: '#app', data: { result:{} }, // 定义事件函数 methods: {//可以在其中定义方法 search:function(){ console.log('页面加载中.....') this.result={ site:'http://www.baidu.com', name: '百度', cite: '[中国，哥伦比亚]' } } } }) </script> </body> </html>
三、路由
vue.js允许我们通过不同的url访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）
需要我们在项目中引入路由的文件 vue-router.min.js
<!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"> <h1>Hello,app</h1> <p> <!-- `router-link` 默认会被渲染成一个 `a` 标签 通过传入的 `to` 属性指定链接 --> <router-link to="/">首页</router-link> <router-link to="/student">会员管理</router-link> <router-link to="/teacher">讲师管理</router-link> </p> <!-- router-view 路由的出口 路由匹配到的组件将渲染在这里面 --> <router-view></router-view> </div> <script src="vue.min.js"></script> <script src="vue-router.min.js"></script> <script> //定义组件 const Welcome={ template:'<div>欢迎来到首页</div>' } const Student={ template:'<div>会员等级列表</div>' } const Teacher={ template:'<div>讲师列表</div>' } // 路由列表 const routes=[ { path: '/',redirect: '/welcome'//路由重定向 }, { path: '/welcome', component:Welcome }, { path: '/student',component:Student }, { path:'/teacher',component:Teacher } ] // 路由对象:配置路由列表 const router=new VueRouter({ routes:routes //定义路由列表 }) new Vue({ el: '#app', data: { }, router:router //将路由对象装置在Vue的上下文中 }) </script> </body> </html>