vue基础

1.导入开发版本的Vue.js
2.创建Vue实例对象,设置el属性和data属性
3.使用简洁的模板语法把数据渲染到页面上

el 挂载点

el是用来设置Vue实例挂载(管理)的元素
vue的实例作用范围
Vue会管理el选项命中的元素及其内部的后代元素
el命令的元素内部，可以被 vue所管理，可以任意嵌套其他的标签
是否可以用其他选择器
可以使用其他的选择器，但是建议使用ID选择器
class选择器 el:’#app’ id选择器 el:’.app’ 标签选择器都可使用el:“div”
开发中因为id选择器唯一，所以一般约定使用id选择器
是否可以设置其他dom元素
vue不可挂载到body和html上，可以使用其他的双标签,不能使用HTML和BODY
v-text
设置标签的文本值
◆v-text指令的作用是:设置标签的内容(textContent)
◆默认写法会替换全部内容使用差值表达式{}可以替换指定内容
◆内部支持表达式

<div id="app">
<h2 v-text="message"></h2>	//程序员
<h2 v-text="message+'!'"></h2> //程序员!
<h2>{{ message+"!!!" }}你好呀</h2> //程序员!!!你好呀

</div>

var app = new Vue({
el:"#app",
data:{
	message:"程序员"
})

v-html
设置标签的innerHTML
◆v-html指令的作用是:设置元素的innerHTML
◆内容中有htm|结构会被解析为标签
◆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="http://baidu.com">百度</a>'
})

v-on
为元素绑定事件，传递自定义参数，事件修饰符

<div id="app">
<input type="button" value="点击事件绑定" v-on:click="doon">
<input type="button" value="鼠标移入事件绑定" v-on:mouseenter="doon">
<input type="button" value="双击事件绑定" v-on:dblclick="doon">
<input type="button" value="双击事件绑定" @dblclick="doon"//vue支持将v-on:替换为@
</div>

var app = new Vue({
	el:"#app",
	methods:{
	doon:function(){
	//逻辑
	}
}

v-show
根据表达值的真假，通过操作元素的display，切换元素的显示和隐藏

<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">	//当age>18时，该图片显示
</div>

var app = new Vue ({
el:"#app",
data:{	
	isShow:false,	//图片显示默认为false
	age:17 	//年龄默认为17
},
methods: {
	changeIsShow: function(){
	this.isShow = !this.isShow;
	},
})

v-if
根据表达值的真假,通过操纵dom元素，切换元素的显示和隐藏，表达式的值为true,元素存在于dom树中,为false,从dom树中移除

<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">	//点击切换显示状态
<p v-if="true">我是一个p标签</p>
<p v-if="isShow">我是一个p标签</p>
<p v-if="表达式">我是一个p标签</p>
</div>

var app = new Vue({
el:" #app",
data:{
	isShow:false，
},
methods: {
		changeIsShow: function(){
			this.isShow = !this.isShow;
		}
	},
])

v-bind
设置元素的属性(比如:src,title,class)

<div id="app">
//v-bind可以省略，直接写:xxx
<img v-bind:src= "imgSrc" >
<img v-bind:title= "imgTitle+'!!!'" >
//如果isActive是true，返回class为active，如果不是，返回空字符串
<img v-bind:class ="isActive?' active'"> //写法1（三元表达式） 如果isActive是true，返回class为active，如果不是，返回空字符串
<img v-bind:class="{active:isActive}">//写法2（对象） active的类名是否生效，取决于isActive是true，则生效，否则不生效
</div>

var app = new Vue({
el:"#app"
data:{
	imgSrc:"图片地址"，
	imgTitle:" 图片的Title",
	isActive:false
	}
})

v-for
根据数据生成列表结构,经常与数组结合使用，语法是（item,index） in 数据，item,index也可以结合其他指令一起使用

<div id="app">
	<ul>
		<li v-for="(item,index) in arr" :title="item">
			{{ index }}{{ item }}
		</li>
		<li v-for="(item,index) in objArr">
			{{ item.name }}
		</li>
	</ul>
</div>

var app = new Vue({
el:"#app",
data:{
	arr:[1,2,3,4,5],
	objArr:[
		{name:"jack"},
		{name:"rose"}
	]
  }
})

v-model
获取和设置表单元素的值(双向数据绑定)

<div id="app">
	<input type="text" v-model="message" @keyup.enter="" />.
	<input type="text" v-model="message" @keyup.enter="" />.
	<p>{{ message }}</p>
</div>

var app = new Vue({
	el: "#app",
	data: {
	methods: {
		getM:function{
			alert(this.message);
		},
		setM:{
			this.message = "abc";
		}
	}
})