一、Vue基础
1.1 Vue是一个渐进式的框架
- 渐进式意味着你可以将Vue作为你应用的一部分嵌套其中
- Vue的核心库以及其生态系统
- Core + Vue-router + Vuex
1.2 Vue安装方式
二. Vue基础语法
模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
文本渲染指令
v-html
后面往往跟一个string类型
会将string的html解析出来并渲染
v-text
与Mustache相似, 一般不用, 不灵活
条件判断
- v-if
- v-else-if
- v-else
v-show
- 当条件为false的时
v-if: 指令的元素, 不会渲染到dom中
v-show: dom增加一个行内样式display: none
遍历指令
// 遍历过程中, 没有使用索引值
<li v-for="item in names">{{item}}</li>
// 遍历过程中, 获取索引值
<li v-for="(item, index) in names">{{index + 1}} - {{item}}</li>
// 遍历对象的时候, 只有一个值, 获得的是value
// 获取对象的key和value
<li v-for="(value, key) in names">{{value}} - {{key}}</li>
// 获取对象的key和value和index
<li v-for="(value, key, index) in names">{{value}} - {{key}} - {{index}}</li>
官方推荐, 使用v-for的时候, 加上一个 key属性
<li v-for="(item, index) in names" :key="item">{{index + 1}} - {{item}}</li>
key要具有唯一性, 不然就没意义
事件
v-on
作用: 绑定事件监听
简写: @
写法:
- 没有参数的情况下, 可以不写(); 如果方法本身有一个参数, 会默认将原生事件event参数传递进去
- 如果传入某个参数, 同时需要event时, 可以通过$event传入时间
| 修饰符 | 作用 | 实际调用 |
| .stop | 阻止事件冒泡 | event.stopPropagation() |
| .prevent | 阻止默认行为 | event.preventDefault() |
| .once | 只触发一次回调函数 |
表单
v-model表单绑定
实现表单元素和数据的双向绑定
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
cosnt app = new Vue({
el: '#app',
data: {
message: '你好'
}
})
// 界面的message数据改了, data里面的message就改变了, 是双向的
其他方法实现双向绑定
// v-bind绑定一个value属性
// v-on指令给当前元素绑定input事件
// 下面代码 等同于 使用v-model
<div id="app">
<input type="text" :value="message" @input="message = $event.target.value">
{{message}}
</div>
cosnt app = new Vue({
el: '#app',
data: {
message: '你好'
}
})
| 修饰符 | 作用 |
| .lazy | 可以让数据只有在失去焦点时或回车时才会更新 |
| .number | 当做数字类型进行处理 |
| .trim | 可以过滤内容左右两侧的空格 |
计算属性 computed
使用: 需要将多个数据结合起来进行显示的时候
<div id='app'>
// 使用拼接的方法 -- 语法太过繁琐
<h2>{{firstName + '' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
// 使用方法
<h2>{{getFullName()}}</h2>
// 使用计算属性 -- 看起来最舒服 最好
<h2>{{fullName}}</h2>
</div>
const app = new Vue({
el: '#app',
data:{
firstName: 'li',
lastName: 'er'
},
// 计算属性
computed: {
fullName: function () {
reture this.firstName + '' + this.lastName
}
},
// 方法
methods: {
getFullName () {
reture this.firstName + '' + this.lastName
}
}
})
computed / methods区别
多次使用的时候
- methods: 每次都会调用
- computed: 计算机会缓存, 不变的情况下只调用一次
三 Vue组件化编程
3.1. 模块与组件、模块化与组件化
3.1.1模块
理解：向外提供特定功能的 js 程序，一般就是一个 js 文件
为什么：js 文件很多很复杂
作用：复用 js，简化 js 的编写，提高 js 运行效率
3.1.2 组件
定义：用来实现局部功能的代码和资源的集合（html/css/js/image…）
为什么：一个界面的功能很复杂
作用：复用编码，简化项目编码，提高运行效率
3.1.3 模块化
当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用
3.2. 非单文件组件
3.2.1. 基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>基本使用</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>{{msg}}</h1>
<hr>
<!-- 第三步：编写组件标签 -->
<school></school>
<hr>
<!-- 第三步：编写组件标签 -->
<student></student>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//第一步：创建school组件
const school = Vue.extend({
//组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
template:`
<div class="demo">
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data(){
return {
schoolName:'尚硅谷',
address:'北京昌平'
}
}
})
//第一步：创建student组件
const student = Vue.extend({
template:`
<div>
<h2>学生姓名：{{studentName}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data(){
return {
studentName:'JOJO',
age:20
}
}
})
//创建vm
new Vue({
el:'#root',
data:{
msg:'你好，JOJO！'
},
//第二步：注册组件（局部注册）
components:{
school,
student
}
})
</script>
</html>
总结：
- Vue中使用组件的三大步骤：
- 定义组件(创建组件)
- 注册组件
- 使用组件(写组件标签)
- 如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但也有点区别：
- el不要写，为什么？
最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
2.data必须写成函数，为什么？
避免组件被复用时，数据存在引用关系
- 如何注册组件？
局部注册：new Vue的时候传入components选项
全局注册：Vue.component('组件名',组件)
- 编写组件标签：<school></school>
2174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
