Vue 基础（入门级）学习笔记（一）

Vue 基础（入门级）学习笔记（一）

学习前言

• 适合已经掌握了HTML、CSS、JavaScript、AJAX基础知识
• 可以使用vscode、sublime等工具，vscode可以下载Live Server插件便于网页实时展示效果（保存网页界面自动变化）
  

---

引入

• Vue.js教程文档

1. 导入开发版本的vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 创建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。

1. 内容绑定，事件绑定

• 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:"<a href='#'>长沙</a>"
	}
})

• 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(){
		//逻辑
		}
	}
})

事件绑定----计数器

2. 显示切换，属性绑定

• 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">
	<!-- active 是否失效取决于isActive -->
</div>

var app =new Vue({
	el:"#app",
	data:{
		imgSrc:"图片地址",
		imgTitle:"我是图片"，
		isActive:false
	},
	methods:{
		toggleIsShow:function(){
			this.isActive = !this.isActive;
		}
	}
})

Vue小例子（二）------ 图片切换

4. 列表循环，表单元素绑定

• 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";
		}
	}	
})