2.3 基本语法
基本数据渲染和指令
双向绑定
M
模型(Model) ：data中的数据
V
视图(View) ：模板代码（不是静态页面） （两个语法：指令，大括号表达式）
VM
viewModel: 视图模型（Vue的实例）
Dom Listeners （Dom 监听）
Data Bindings （数据绑定）
data中所有的属性，最后都出现在了vm身上。
vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定
MVVM
MVVM 本质上是 MVC （Model-View- Controller）的改进版。即模型-视图-视图模型。
模型model指的是后端传递的数据，视图view指的是所看到的页面。
视图模型viewModel是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：
将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定
将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听
这两个方向都实现的，我们称之为数据的双向绑定
<div id="app"> <!-- v-bind:value只能进行单向的数据渲染 --> <input type="text" v-bind:value="search.keyWord"/> <!-- v-model 可以进行双向的数据绑定 --> <input type="text" v-model="search.keyWord"/> <p>{{search.keyWord}}</p> </div> <script src="vuejs/vue.min.js"></script> <script> new Vue({ el: '#app', data: { search:{ keyWord:'库里' } } }) </script>
绑定事件
<div id="app"> <button v-on:click="search()">查询</button> </div> <script src="vuejs/vue.min.js"></script> <script> new Vue({ el: '#app', data: { searchMap:{ keyWord:'库里' }, //查询结果 result: {} }, methods:{ //定义多个方法 search(){ console.log('search.......') }, f1(){ console.log('f1.....') } } }) </script>
简写
绑定单击事件的时候也可以用@click
绑定的单击事件也可以不加括号
<div id="app"> <button v-on:click="search()">查询</button> <button @click="f1()">查询</button> </div>
vue修饰符和条件指令
重要的是记住prevent这个指令，它的作用是当表单提交的时候不会提交表单，而是执行onSubmit方法
<!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"> <!-- 提交表单的时候不会直接提交表单,而是先去执行onSubmit方法 --> <form action="save" v-on:submit.prevent="onSubmit"> <input type="text" id="name" v-model="user.name"/> <button type="submit">保存</button> </form> </div> <script src="vuejs/vue.min.js"></script> <script> new Vue({ el: '#app', data: { user:{} }, methods:{ onSubmit(){ if(this.user.name){ console.log('提交表单') }else{ alert('请输入用户名') } } } }) </script> </body> </html>
条件渲染
v-if：条件指令
这个逻辑很好理解
复选框双向绑定了ok对象默认是false所以默认下面就会出现库里
点击复选框就会出现詹姆斯
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
<body> <div id="app"> <input type="checkbox" v-model="ok"/>是否同意 <h1 v-if="ok">詹姆斯</h1> <h1 v-else>库里</h1> </div> <script src="vuejs/vue.min.js"></script> <script> new Vue({ el: '#app', data: { ok:false } }) </script> </body>
循环指令
v-for：列表循环指令例1：简单的列表渲染
<body> <div id="app"> <!-- in后面是遍历的次数,前面是遍历的值.in是固定写法 --> <ul> <li v-for="n in 10">{{n}}</li> </ul> <!-- n为值，index为索引值 --> <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="vuejs/vue.min.js"></script> <script> new Vue({ el: '#app', data: { userList:[ {id:1,username:'helen',age:18}, {id:2,username:'hello',age:12}, {id:3,username:'ABC',age:15} ] } }) </script> </body>
2.4 组件（重点）
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
全局组件
所有实例都能用全局组件。
<div id="app"> <runoob></runoob> </div> <script> // 注册 Vue.component('runoob', { template: '<h1>自定义组件!</h1>' }) // 创建根实例 new Vue({ el: '#app' }) </script>
局部组件
我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
<body> <div id="app"> <runoob></runoob> </div> <script> var Child = { template: '<h1>自定义组件!</h1>' } // 创建根实例 new Vue({ el: '#app', components: { // <runoob> 将只在父模板可用 'runoob': Child } }) </script> </body>
但是我们还可以把它写进js文件，然后其他项目引入后也可以使用这个组件
2.5 生命周期
生命周期就是Vue从创建到销毁的过程
钩子方法的定义：通过一个方法来干涉另一个方法的行为
2.6 Vue路由
高级版的超链接
router-link制作导航
router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。Vue.js 路由需要复制到文件夹中
路由出口
路由匹配到的组件将渲染在这里
<router-view></router-view>
引入js文件
<script src="vue.min.js"></script> <script src="vue-router.min.js"></script>
对代码的详细解析，写在注释里了记得仔细看注释
<!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 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/">首页</router-link> <router-link to="/student">会员管理</router-link> <router-link to="/teacher">讲师管理</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> <!-- 顺序不能引错 --> <script src="vuejs/vue.min.js"></script> <script src="vuejs/vue-router.js"></script> <script> // 1. 定义（路由）组件。 // 可以从其他文件 import 进来 //自定义了三个组件分别是Welocame，Student，Teacher。其只的template是固定写法 const Welcome = { template: '<div>欢迎</div>' } const Student = { template: '<div>student list</div>' } const Teacher = { template: '<div>teacher list</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 //这里路由映射组件，意思是点击链接跳转到这个组件 const routes = [ { path: '/', redirect: '/welcome' }, //设置默认指向的路径 { path: '/welcome', component: Welcome }, { path: '/student', component: Student }, { path: '/teacher', component: Teacher }] // 3. 创建 router 实例，然后传 `routes` 配置 // 创建根实例 const router = new VueRouter({ routes // （缩写）相当于 routes: routes 20 }) new Vue({ el: '#app', router }) </script> </body> </html>
三、axios
3.1 axios简介
就是在vue发送ajax请求
vscode中使用node.js
如果遇见问题可以重启vscode即可
3.2 总结
四、Node.js
官网下载安装到windows本地即可，Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境
4.1 总结
![[JS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635707/20241110/daf0d8f748364c2db4d13bd280b11e7b.png?x-oss-process=image/resize,h_160,m_lfit)