发布时间:2023-10-11 19:30
Vue:一种用于构建用户界面的渐进式javascript框架
Vue可以自底向上逐层的应用简单应用:只需一个轻量小巧的核心库复杂应用:可以引入各式各样的Vue插件
特定:
1、采用组件化模式,提高代码复用率,且让代码更好维护
2、声明式编码,让编码人员无需直接操作DOM,提高开发效率
1.一个vue实例只能对应一个容器,多个容器的话,只显示最先执行的那个
2.多个vue实例对应一个实例,只会有第一个vue管理
总结:一个vue实例只能对应一个容器(一对一,一夫一妻制)
1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】;
4.Vue实例和容器是一一对应的;
5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
7.一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新;注意区分: js表达式和js代码(语句)
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a': "b"
2.js代码(语句)
(1).if(){0}
(2).for(){}
1.插值语法:
功能:用于解析标签体内容。
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。
2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....) 。
举例:v-bind:href="xxx”可简写为:href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性。
备注: Vue中有很多的指令,且形式都是: v-xxx,此处我们只是拿v-bind举个例子。
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例,随后再通过vm.$mount( ' #root')指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。
3.一个重要的原则:
由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。
MVVM模型:
MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑(数据模型)的开发分离开来,这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器,这意味着视图模型负责从模型中暴露(转换)数据对象,以便轻松管理和呈现对象。在这方面,视图模型比视图做得更多,并且处理大部分视图的显示逻辑。视图模型可以实现中介者模式,组织对视图所支持的用例集的后端逻辑的访问。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mvvm</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>名称:{{name}}</h2>
<h2>战队:{{rank}}</h2>
<h2>测试:{{$options}}</h2>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'uzi',
rank:'RNG'
}
})
</script>
</body>
</html>
MVVM模型
1、M:模型(Model) : data中的数据
2、V:视图(View):模板代码
3、VM:视图模型(ViewModel):Vue实例观察发现:
1.data中所有的属性,最后都出现在了vm身上。
2.vm身上所有的属性及Vue原型上所有属性,在Vue模板中都可以直接使用。
Vue中的数据代理
1.Vue中的数据代理;
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过object.defineProperty()把data对象中所有属性添加到vm上.为每一个添加到vm上的属性,都 指定一个getter/setter。
在getter/setter内部去操作(读/写)data中对应的属性。
一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。
二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。
这两个方向都实现的,我们称之为数据的双向绑定。
data为对象:
data:{
message: '此时mustache表达式是通过data为对象来获取message的值'
}
data为函数
data(){
return{
message: '此时mustache表达式是通过data为函数来获取message的值'
}
}
el与data的两种写法:
el:
1.el:"#app"
2.let vue = new Vue();
vue.$mount("#app");
你看到的 v-bind 特性被称为指令。指令带有前缀 v-
除了使用插值表达式{{}}进行数据渲染,也可以使用 v-bind指令,它的简写的形式就是一个冒号(:)
<body>
<div id="app">
<input type="text" name="username" v-bind:value="name"><br>
<input type="text" name="username" :value="name"><br>简写
</div>
</body>
<script src="JS/vue.js"></script>
<script>
new Vue({
el : "#app",
data : {
name : "nihaonasha"
}
})
</script>
<!--这里就是MVVM中的View-->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
msg: "vue"
}
});
</script>
v-model默认获取的就是value
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>
修饰符 (Modifiers) 是以半角句号(.)指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
即阻止事件原本的默认行为
<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>
使用v-show完成和上面相同的功能
<!-- v:show 条件指令 初始渲染开销大 -->
<h1 v-show="ok">show:Lorem ipsum dolor sit amet.</h1>
<h1 v-show="!ok">no</h1>
例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 in userList"></tr> -->
<tr v-for="(item, index) in userList">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
</tr>
</table>
1.插值语法:
2.指令语法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>el与data的两种写法</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>Hello,{{name}}!</h1>
</div>
<script>
Vue.config.productionTip = false
//el的两种写法:
// const vm = new Vue({
// // el:'#root', //第一种写法
// data:{
// name:'JOJO'
// }
// })
// vm.$mount('#root')//第二种写法
//data的两种写法:
new Vue({
el:'#root',
//data的第一种写法:对象式
// data:{
// name:'JOJO'
// }
//data的第二种写法:函数式
data(){
return{
name:'JOJO'
}
}
})
</script>
</body>
</html>
总结:
el有2种写法:
data有2种写法:
如何选择:目前哪种写法都可以,以后学到组件时,data必须使用函数,否则会报错
由Vue管理的函数,一定不要写箭头函数,否则this就不再是Vue实例了
组件(Component)是 vue.js 最强大的功能之一。
组件可以扩展 html 元素,封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
var app = new Vue({
el: '#app',
// 定义局部组件,这里可以定义多个局部组件
components: {
//组件的名字
'Navbar': {
//组件的内容
template: '<ul><li>首页</li><li>学员管理</li></ul>'
}
}
})
使用组件
<div id="app">
<Navbar></Navbar>
</div>
定义全局组件:components/Navbar.js
// 定义全局组件
Vue.component('Navbar', {
template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})
<div id="app">
<Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
var app = new Vue({
el: '#app'
})
</script>
解决TypeError: Cannot read properties of undefined (reading ‘NormalModule‘)的三种方案
【论文阅读】DynaPosGNN: Dynamic-Positional GNN for Next POI Recommendation
合宙esp32c3不带串口芯片的型号如何arduino和micropython
Vue项目中CSS Modules和Scoped CSS的介绍与区别
tensorboard报错Duplicate plugins for name projector解决方法
基于python+django学生信息管理系统设计与实现(毕业论文+毕设源码)