VUE狂神学习笔记：基础知识部分
发布时间：2023-09-07 18:30
第一个Vue程序
导入在线cdn
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
{{message}}
div>
body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
var vm = new Vue({
//id选择器选中div元素
el:"#app",
//数据都是以键值对的形式存放的
data:{//model层处理数据
message:"hello,vue!"
}
})
script>
html>
最终出来的效果
那么viewmodel层应该如何理解，实际viewmodel就是一个双向绑定的东西，一边绑定了view的样式一边绑定了model的数据，具有即时编译的特性可以实现数据的实时监听，不用刷新页面也可以更新数据。
这里我们尝试对数据进行修改
回车！数据刷新了，但这个过程中我们的页面并没有刷新。而是通过虚拟dom来完成的。虚拟dom是一层对真实dom的抽象，这些抽象出来的属性最终映射到真实dom中。在实际开发中频繁操作真实dom容易导致浏览器卡顿用户体验差。
Vue的基本语法
-
v-bind
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div id="app"> <span v-bind:title="message"> hhhhhhhhh <label v-text="message"/> span> div> body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script> <script> var vm = new Vue({ el:"#app", data:{ message:"hello,vue!" } }) script> html> -
v-if
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div id="app"> <h1 v-if="type=='A'">Ah1> <h1 v-else-if="type=='B'">Bh1> <h1 v-else>Ch1> div> body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script> <script> var vm = new Vue({ el:"#app", data:{ type:"A" } }) script> html> -
v-for
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div id="app"> <li v-for="a in array"> 姓名：{{a.name}} 年龄：{{a.age}} li> div> body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script> <script> var vm = new Vue({ el:"#app", data:{ array:[ {name:'zjq',age:18} , {name:'aaa',age:90}, {name:'bbb',age: 12} ] } }) script> html> -
v-on
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div id="app"> <button v-on:click="sayHi">CLICK MEbutton> div> body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script> <script> var vm = new Vue({ el:"#app", data:{ message:"dianwo" }, methods:{ //方法需要放在methods域中 sayHi:(function (event) {//传入事件on-click alert(this.message)//绑定数据 }) } }) script> html>
数据的双向绑定
v-bind只是单向绑定，是数据绑定到视图。双向绑定是通过视图改变数据，然后数据最终影响视图。这需要用v-model完成。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<input v-model="message">
<br>
{{message}}
div>
body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:""
}
})
script>
html>
刚开始是这样的
随着往当中写入数据下面一行会实时更新我写入的数据
Vue组件
组件就是h1、input这类标签被称之为组件，我们可以自定义我的自己的组件，在代码中实现复用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<my-comp v-for="item in array" v-bind:arg="item">
my-comp>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
//插入一个组件 第一个参数是组件的名字第二个是组件的实体，实体中包含需要接收的参数和模板
Vue.component("my-comp",{
props:['arg'],
template:'{{arg}}
'
});
var vm = new Vue({
el:"#app",
data:{
array:[
"aaa",
"bbb",
"ccc"
]
}
})
script>
html>
Vue计算属性
计算属性是将方法的返回值作为一个结果保存在内存中，相当于缓存。当数据刷新时重新计算对应的值。相较于方法更加节省运行空间。vue的计算属性叫computed。计算属性里的方法可以不加括号调用，因为他是一个属性，但是methods里的方法就不可以了。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<p>{{c()}}p>
<p>{{h}}p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:'zjq'
},
methods:{
c: function(){
return Date.now();
}
},
computed:{
h:function(){
return Date.now();
}
}
});
script>
body>
html>
插槽
插槽就是动态的留出一个口来进行组件的拔插，通过留一个
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title">todo-title>
<todo-items slot="todo-items" v-for="item in items" :item="item">todo-items>
todo>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
Vue.component("todo",{
props: ['title','items'],
template: '' +
''
+
'