Vue 基础（入门级）学习笔记（一）
Vue 基础（入门级）学习笔记（一）
学习前言
- 适合已经掌握了HTML、CSS、JavaScript、AJAX基础知识
- 可以使用vscode、sublime等工具，vscode可以下载Live Server插件便于网页实时展示效果（保存网页界面自动变化）
引入
- Vue.js教程文档
- 导入开发版本的vue.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
- 创建Vue实例对象，设置el属性和data属性
<div id="app">
{
{ message }}
<h2>{
{ school.name }}h2>
<ul>
<li>{
{ campus[0] }}li>
<li>{
{ campus[3] }}li>
ul>
div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'，
school:{
name:"第一个对象名"，
address:"中国"
},
campus:["A","B","C"]
}
})
-
el:挂载点
- 支持类选择器、id选择器、标签选择器等，但是在实际开发中建议使用类选择器（唯一）
- 可以使用其他双标签，但是不要把vue挂载到标签上，因为它们带自己的样式
- Vue会管理el选项中命中的元素及其内部的后代元素
-
data数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型的数据时，遵守js语法即可
Vue指令
指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
- 内容绑定，事件绑定
- v-text
- v-text指令的作用是：设置标签的内容
- 默认写法会替换全部内容，使用差值表达式{ {}}可以替换指定内容
- 内部支持写表达式
<div id="app">
<h2 v-text="message+'!'">长沙h2>
<h2 v-text="info">长沙h2>
<h2>{
{ message }}长沙h2>
div>
var app =new Vue({
el:"#app"
data:{
message:"是哪个城市！！！"
info:"乌鲁木齐"
}
})
//只有最后一个可以显示长沙
- v-html
- v-html指令的作用是：设计元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么，只会解析为文本
- 解析文本使用v-text，需要解析HTML结构使用v-html
<div id="app">
<p v-html="content">长沙p>
div>
var app =new Vue({
el:"#app"
data:{
content:"长沙"
}
})
- v-on
- v-on指令的作用是为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过使用this关键字可以访问定义站在data中数据
<div id="app">
<input type="button" value="事件绑定" v-on:click="doIt">
<input type="button" value="事件绑定" v-on:monseenter="doIt">
<input type="button" value="事件绑定" v-on:dbclick="doIt">
<input type="button" value="v-on简写" @dbclick="doIt">
div>
var app =new Vue({
el:"#app",
methods:{
doIt:function(){
//逻辑
}
}
})
事件绑定----计数器
- 显示切换，属性绑定
- v-show
- v-show指令的作用是：根据表达式值的真假，切换元素显示和隐藏
- 原理是修改元素的display，实现显示隐藏
- 指令后面的内容，最终都会解析为布尔值
- 值为true元素显示，值为false元素隐藏
- 数据改变之后，对应元素的显示状态会同步更新
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<input type="button" value="累加年龄" @click="addAge">
<img src="地址 " v-show="true">
<img src="地址" v-show="isShow">
<img src="地址" v-show="age>=18">
div>
var app =new Vue({
el:"#app",
data:{
isShow:false,
age:16
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
}
addAge:function(){
this.age++;
}
}
})
- v-if
- v-if指令的作用是：根据表达式值的真假切换元素显示和隐藏
- 本质是通过操纵dom元素来切换显示状态
- 当表达式的值为true，元素存在于dom树中，为false，从dom树中移除
<div id="app">
<input type="button" value="切换显示" @click="toggleIsShow">
<p v-if="isShow">这是个什么p>
<p v-show="isShow">v-show修饰p>
<h2 v-if="temperature>=35">热死啦h2>
div>
var app =new Vue({
el:"#app",
data:{
isShow:false,
temperature:40
},
methods:{
toggleIsShow:function(){
this.isShow = !this.isShow;
}
}
})
- v-bind
- v-bind指令的作用是：为元素绑定属性
- 完整写法是v-bind:属性名
- 简写的话可以直接忽略v-bind，只保留：属性名
- 需要动态增删class建议使用对象的方式
.active{
boder:1px solid red;
}
<div id="app">
<img v-bind:src="imgSrc" >
<img v-bind:title="imgtitle+'!!!'" >
<img v-bind:class="isActive?'active':''">
<img v-bind:class="{active:isActive}">
div>
完全等价于
<div id="app">
<img :src="imgSrc" >
<img :title="imgtitle+'!!!'" >
<img :class="isActive?'active':''" @click="toggleActive">
<img :class="{active:isActive}" @click="toggleActive">
div>
var app =new Vue({
el:"#app",
data:{
imgSrc:"图片地址",
imgTitle:"我是图片"，
isActive:false
},
methods:{
toggleIsShow:function(){
this.isActive = !this.isActive;
}
}
})
Vue小例子（二）------ 图片切换
- 列表循环，表单元素绑定
- v-for
- v-for指令的作用是：根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是（item，index）in 数据
- item和index可以结合其他指令一起使用
- 数组长度的更新会同步到页面上，是响应式的
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="(item,index) in arr" :title="item">
{
{ index }}{
{ item.name }}
li>
ul>
div>
var app =new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
objArr:[
{
name:"jack"},
{
name:"rose"}
]
},
methods:{
add:function(){
this.vegetables.push({
name:"tom"})
},
remove:function(){
this.vegetables.shift()
},
})
- v-on补充
- 事件绑定上的方法写成函数调用的形式，可以传入自定义参数
- 定义方法是需要定义形参来接受传入实参
- 事件的后面跟上，修饰符可以对事件进行限制
- .enter可以限制触发的按键为回车
- 事件修饰符有很多种
<div id="app">
<input type="button" value="点击" @click="add">
<input type="text" @keyup.enter="sayHi">
div>
var app =new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){
console.log("做IT");
console.log(p1);
console.log(p2);
},
sayHi:function(){
alert("吃了没");
},
})
- v-model
- v-model指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据和表单元素的值相关联
- 绑定的数据<------>表单元素的值
<div id="app">
<input type="text" value="修改message" @click="setM"/>
<input type="text" v-model="message" @keyup.enter="getM"/>
<h2>{
{ message }}h2>
div>
var app =new Vue({
el:"#app",
data:{
message:"v-model"
},
methods{
getM:function(){
alert(this.message);
}
setM:function(){
this.message = "bian";
}
}
})