Vue在线应用
在线引用的vue.js ,需要网络
//开发版本:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//生产版本:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Hello Vue
需要先加载div块,再加载Vue实例,利用div的id与Vue实例中的el相互绑定
1.vue实例(对象)中el属性: 代表Vue的作用范围 日后在Vue的作用范围内都可以使用Vue的语法
2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出
3.在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的第一个入门案例</title>
</head>
<body>
<hr>
<div id="app">
{{ msg }} {{username}} {{pwd}}
<br>
<span>
{{ username }}
<h1>{{ english }}</h1>
</span>
</div>
{{msg}}
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app", //element 用来给Vue实例定义一个作用范围
data:{ //用来给Vue实例定义一些相关数据
msg:"hello world ! hello Vue !",
username:"lx",
pwd :"12345",
english:"life is hard"
},
});
</script>
</body>
</html>
Vue基础语法
1.Vue中data定义的数据类型
data: {
msg:"hello vue",//String
user:{name:"大笨钟",msg:"请你别太得意"},//对象
age:23,//Integer
lists:["晴天","大笨钟","给我一首歌的时间"],//数组
users:[{name:"小新",age:18},{name:"小吴",age:18}]//数组对象
}
2.vue中取值
取vue中data的值,采用双大括号 例如: {{msg}}
const app = new Vue({
el:"#app",
data:{
msg:"hello world",
MSG:"I MISS YOU"
}
})
<div id="app">
{{msg.toUpperCase()}} <br>
{{MSG.toLowerCase()}}
</div>
3. v-text和v-html
v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中 innerText
1.{{}}(插值表达式)和v-text获取数据的区别在于
a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据
b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁
<div id="app">
{{msg}} <br>
<p v-text="msg">这里头就被覆盖了</p>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
msg:"you can do it"
}
})
</script>
v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于javascript中 innerHTML
<div id="app2">
<span v-html="msg"></span>
</div>
const app2 = new Vue({
el:"#app2",
data: {
msg: "<a href=\"http://www.baidu.com\">baidu</a>"
}
})
点击可以实现到百度的跳转
4.事件绑定 v-on/@ 和methods方法
事件 事件源:发生事件dom元素 事件: 发生特定的动作 click… 监听器 发生特定动作之后的事件处理程序 通常是js中函数
1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如 v-on:click
2.在v-on:事件名的赋值语句中是当前时间触发调用的函数名
3.在vue中事件的函数统一定义在Vue实例的methods属性中
4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据
v-on: 可以用 @来替代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span v-text="number"></span>
<input type="submit" value="点击加一" v-on:click="add">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
msg:"Welcome !",
number:20
},
methods:{
add: function () {
this.number++;
}
}
})
</script>
</body>
</html>
在Vue中事件定义存在两种写法 一种是 函数名:function(){} 推荐 一种是 函数名(){} 推荐
methods:{
/*changecount:function(){
this.count++;
}*/
changecount(){
this.count++;
}
}
5.Vue事件参数传递
在使用事件时,可以直接在事件调用出给事件进行参数传递,在事件定义出通过定义对应变量接收传递的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{num}}
<input type="submit" value="阿巴阿巴" @click="addNumber(99,'小新')">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
num:20
},
methods: {
addNumber:function (num,name) {
this.num=++num;
alert(name);
}
}
})
</script>
</body>
</html>
6. v-show v-if v-bind
v-show
:用来控制页面中某个标签元素是否展示 底层使用控制是 display 属性
v-if
: 用来控制页面元素是否展示 底层控制是DOM元素 操作DOM
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue的v-show使用</title>
</head>
<body>
<div id="app">
<h2 v-if="false">显示不出来</h2>
<h2 v-if="show">show=false无法显示</h2>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
show:false
},
methods:{
}
})
</script>
</body>
</html>
vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名
简化之后 :属性名
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xht g/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue的v-bind使用</title>
<style>
.aa{
border: 2px red solid;
}
</style>
</head>
<body>
<div id="app">
<img width="300" :title="msg" :class="{aa:showCss}" :src="src" alt="">
<input type="button" value="增加边框" @click="addCss">
<input type="button" value="变成雷律" @click="changeSrc">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
msg:"律化娜!!!",
showCss:true,
src:"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1601210269&di=fb3eeb2f43bf7245faa7bd0a97ea8c7a&src=http://b-ssl.duitang.com/uploads/item/201812/14/20181214164808_mpgek.jpg"
},
methods:{
addCss(){
this.showCss= !this.showCss;
},
changeSrc(){
this.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601220429475&di=51d2ee0f727d8b812c4a7a249aac5304&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb5e8fd53f74408b35c65fd9eca99428b4c8056df.jpg";
}
}
})
</script>
</body>
</html>
7. v-for 遍历数组
v-for
: 作用就是用来对对象进行遍历的(数组也是对象的一种)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04.Vue中v-for指令的使用</title>
</head>
<body>
<div id="app">
<span>{{ user.name }} {{ user.age }}</span>
<br>
<!--
通过v-for遍历对象
-->
<span v-for="(value,key,index) in user">
{{index}} : {{key}} : {{value}}
</span>
<!--
通过v-for遍历数组
-->
<ul>
<li v-for="a,index of arr" >
{{index}} {{a}}
</li>
</ul>
<!--
通过v-for遍历数组中对象
:key 便于vue内部做重用和排序
-->
<ul>
<li v-for="user,index in users" :key="user.id">
{{index+1}} {{ user.name }} === {{ user.age }} ==== {{ user.content }}
</li>
</ul>
<ul>
<li v-for="book,index in books">
{{index+1}} {{book}}
</li>
</ul>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
user:{name:"小新",age:23},
arr:["北京", "天津", "深圳"],
books:["Java从入门到放弃","数据库从删库到跑路","Android从入门到转行"],
users:[
{id:"1",name:"小新",age:23,content:"life is hard"},
{id:"2",name:"小吴",age:23,content:"life is hard and keep hard"},
]
},
methods: {
}
});
</script>
</body>
</html>
9.v-model 数据绑定
v-model
: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制
1.使用v-model指令可以实现数据的双向绑定
2.所谓双向绑定 表单中数据变化导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化 称之为双向绑定
MVVM架构 双向绑定机制
Model: 数据 Vue实例中绑定数据
VM: ViewModel 监听器
View: 页面 页面展示的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05.v-model和数据双向绑定</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<br>
<span>{{message}}</span>
<hr>
<input type="button" value="改变Data中值" @click="changeValue">
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message:""
},
methods: {
changeValue(){
this.message='总要做点什么';
}
}
});
</script>
</body>
</html>