Vue.js学习笔记 第一天
Vue.js学习笔记 第一天
- Vue.js
- 特点：
- 安装：
- 语法与实践
- MVVM框架
- 解决{{}}表达式的闪烁问题
- 使用v-text
- 使用v-bind
- 使用v-on
- 事件修饰符
- v-model 双向数据绑定
- 在vue中使用样式
- 使用v-for
- 使用v-if和v-show
Vue.js
Vue是一个渐进式的框架，他可以作为你应用的一部分嵌入进来。
特点：
-
1、实现视图和数据之间的解耦
-
2、可复用组件
-
3、前端路由技术
-
4、状态管理
-
5、虚拟DOM
安装：
官网安装教程
三种安装方式：
- 1、CDN引入（CDN：内容分发网络）
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">script>
这种方式的特性：在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。如果用户已经加载过，会从缓存中加载 ，这样可以减少加载时间。但是如果没有，那么第一次加载速度可能慢。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
学习或开发阶段时候使用会慢，因为测试是在本地测试的。因此开发时不要使用这种。
-
2、直接下载引入： 选择开发或生产版本下载即可（如果点击直接打开可以右键另存为）
-
3、NPM方式：以后再看
语法与实践
学习暂时安装采用第二种、创建个目录将下载的vue.js放进去，随便选个IDE打开即可。
接下来再写个html，里面引用vue.js即可
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hellotitle>
head>
<body>
<div id="top"> {{hello}} div>
<script src="../js/vue.js">script>
<script>
//这边const是es6的语法，let表示变量、const表示常量
const myVue= new Vue({
el:'#top', //用于挂载要管理的元素
data:{ //定义数据
hello:'欢迎来到实力至上主义课堂'
}
})
script>
body>
html>
先拿出一个Vue对象出来看看，上面id=top的div 已经被myVue管理了，那么{{}}里面的东西就会被解析成Vue的设定值，完成渲染。
这种编程范式叫:声明式编程。
并且这里的数据是动态的更新的。
MVVM框架
上述例子中
M：data:{ hello:'欢迎来到实力至上主义课堂' } 用来保存每个页面的数据
V：
VM调度者为：myVue对象
解决{{}}表达式的闪烁问题
这时候我们如果网速慢加载完vue.js之前就会先看到{{hello}}显示了出来。
这是我们可以使用 v-cloak 如下：再css中定义下标记为v-cloak的就显示为隐藏。
这样可以解决这个插值表达式的闪烁问题。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hellotitle>
<style>
[v-cloak]{
display: none;
}
style>
head>
<body>
<div id="top">
<p v-cloak> {{hello}} p>
div>
<script src="../js/vue.js">script>
<script>
//这边const是es6的语法，let表示变量、const表示常量
let myVue= new Vue({
el:'#top', //用于挂载要管理的元素
data:{ //定义数据
hello:'欢迎来到实力至上主义课堂'
}
})
script>
body>
html>
看以下代码，学指令：
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>hellotitle>
<style>
[v-cloak]{
display: none;
}
style>
head>
<body>
<div id="top">
<p v-cloak> {{hello}} p>
<p v-text="hello">p>
<p v-html="hi">p>
<input type="button" value="按钮" :title="buttonTitle+'haah'" v-on:click="sout">
div>
<script src="../js/vue.js">script>
<script>
//这边const是es6的语法，let表示变量、const表示常量
let myVue= new Vue({
el:'#top', //用于挂载要管理的元素
data:{ //定义数据
hello:'欢迎来到实力至上主义课堂',
hi:'hi
',
buttonTitle:'查询'
},
methods:{
sout:function (){alert('haha')}
}
})
script>
body>
html>
使用v-text
输出是一样的，但上面两种是有区别的。
-
1、首先v-text没有上述插值表达式的闪烁问题。
-
2、{{}}前后可以放别的内容，而v-text会覆盖原本p里面的内容
使用v-html
可以将和v-text差不多，但是会将内容按照html输出。
使用v-bind
html的特性是无法拿到data里面的值的，需要v-bind帮忙，如上图的button按钮中的title就不能直接拿到data里hi的值，这时要添加v-bind即可。可以用简写形式 ： (就是这个冒号：)
<input type="button" value="按钮" v-bind:title="buttonTitle+'haah'">
<input type="button" value="按钮" :title="buttonTitle+'haah'">
这里面可以用+‘’添加其他你想加的值，里面用单引号。
使用v-on
用于事件上，可以在Vue里面使用method实现方法，然后在用v-on绑定事件调用方法。
缩写方式@
<a v-on:click="doSomething">...a>
<a @click="doSomething">...a>
事件修饰符
| 修饰符 | 含义 |
|---|---|
| .stop | 阻止冒泡 ：如子父节点都存在点击事件时，在子节点使用 @click.stop = “事件方法名”，这样点击子节点位置就可以阻止父节点的事件发生。 |
| .capure | 捕获机制，如点击事件时，在父节点上加上，点击子节点内容时会先执行父节点的事件 |
| .prevent | 阻止默认行为：如a标签点击时不想它跳转，而是执行别的函数，此时使用@click.prevent=‘’ |
| .self | 只当事件在自身时才触发 ，如果点击他的子节点，此节点不会执行，相当于阻止了冒泡，但是仅仅阻止了此节点，其他冒泡的节点继续冒泡。 |
| .once | 事件处理只触发一次 |
v-model 双向数据绑定
<h2 id="top-mar" >{{title}}h2>
<input type="text" v-model:value="title" style="width: 600px" title="请输入标题">
实现双向的数据绑定，这样用户输入的也可以动态取得页面中。
在vue中使用样式
1、calss属性绑定，直接传递数组，还可以使用三元表达式
简略代码：
或者
<h2 id="top-mar" :class="['color',{'font-size':sizeFlag}]" >{{title}}h2>
data:{ //定义数据
title:'欢迎来到实力至上主义课堂',
sizeFlag:false
}
推荐使用对象的方式代替三元表达式
<h2 id="top-mar" :class="cssObject" >{{title}}h2>
data:{ //定义数据
title:'欢迎来到实力至上主义课堂',
cssObject:{color:true,fontSize:false}
}
内联方式：
<h2 id="top-mar" :style="css">{{title}}</h2>
data:{ //定义数据
title:'欢迎来到实力至上主义课堂',
css:{color:'red','font-size':'11px'}
}
使用v-for
<p v-for="item in list">{{item}}p>
拿到索引值： <p v-for="(item,i) in list">{{i}}+++++{{item}}p>
data:{
list:[1,2,3,4,5,6,7,8]
}
遍历对象属性：
<p v-for="(val, key) in user">值是：{{val}}-------键是{{key}}</p>
data:{
user:{
id:1,
name:'haha'
}
}
遍历数字 {{count}}
遍历对象时，除了（val,key）,后面还可以拿到索引值(val, key,i)
以下有一个例子，里面使用了:key=“item.id”，就是设定一个绑定的主键，保证唯一绑定，注意：这个v-for使用的时候key属性只能用number获取string。通常我们必须指定这个key。
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>hellotitle>
<style>
[v-cloak]{
display: none;
}
#top{
width: 600px;
border-radius:5px 5px 5px 5px;
border:1px solid #C92027;
height:800px;
margin:0 auto;
}
style>
head>
<body>
<div id="top">
<div>
<label >ID:
<input type="text" v-model="id">
label>
<label >姓名:
<input type="text" v-model="name">
label>
<input type="button" value="添加" @click="add">
div>
<p v-for="item in userList" :key="item.id">
<input type="checkbox" >
{{item.id}}------
{{item.name}}
p>
div>
<script src="../js/vue.js">script>
<script>
let myVue= new Vue({
el:'#top',
data:{
id:0, //注意这里要初始化
name:'',
title:'欢迎来到实力至上主义课堂',
userList:[{
id:1,
name:"二狗"
},{
id:2,
name:"三猫"
},{
id:3,
name:"六虎"
},{
id:4,
name:"七马"
}]
},
methods:{
add(){
this.userList.unshift({id:this.id,name:this.name})
}
}
})
script>
body>
html>
使用v-if和v-show
v-if 确实移除或创建了元素，切换性能高一点，频繁切换不要用这个，如果if判断出结束后永远都不会再显示它，可以用v-if。
v-show 只是显示或不显示，不会重新删除和增加DOM操作。初始渲染消耗高。
<p v-if="flag">ifp>
<p v-show="flag">showp>
data:{
flag:false,
}
第一天结束。有请第二天：
抱歉第二天还没来。
这个世界有成千万种爱，没有哪一种可以重来。