本文介绍了Vue的基础语法，包括如何引入核心JS文件、准备DOM结构和实例化组件。深入讲解了Vue指令，如文本渲染（v-text、v-once、v-html）、class和style绑定、事件监听以及v-model双向数据绑定的应用。同时，详细阐述了条件渲染（v-if、v-else、v-else-if、v-show）和列表渲染（v-for）的用法，以及事件修饰符的使用。
1.Vue基础语法
Vue介绍
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
MVVM:Model-View-ViewModel采用双向数据绑定，改变数据影响元素，反之亦然。
Vue基础语法使用
<head>
<meta charset="UTF-8">
<title>基础语法</title>
引入Vue的核心JS文件
<!--1、引入Vue的核心JS文件，Vue会被当做全局变量使用-->
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
1、引入Vue的核心JS文件
2、准备Dom结构
3、实例化组件
通过el属性，挂载元素，绑定id为app的html元素
通过data属性，定义数据，可以在html代码段中显示的数据
4、获取数据
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
-->
准备Dom结构
<div id="app">
<!--双花括号取值-->
<div>{{msg}}</div>
<div>{{msg.split("").reverse().join("")}}</div> <!--字符串方法操作-->
<div>{{num + 1}}</div> <!--数值运算-->
<div>{{flag?"喜欢":"不喜欢"}}</div> <!--三目运算符-->
<!--下面的会报错-->
<!-- 这是语句，不是表达式 -->
<!--{{ var a = 1 }}-->
<!-- 流控制也不会生效，请使用三元表达式 -->
<!--{{ if (ok) { return message } }}-->
</div>
<script type="text/javascript">
实例化组件
var app = new Vue({
el:"#app", // el：element的简写。挂载元素，绑定id为app的html元素
data:{ // 定义数据，可以在html代码段中显示的数据
msg:"Hello Vue！",
num:10,
flag:true
}
});
</script>
</body>
Vue指令
Vue指令-文本渲染
指令 (Directives)
是带有 v- 前缀的特殊属性。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
<body>
<div id="app">
v-text:
显示数据，响应式（默认）
简写：{{}}
<div v-text="msg"></div>
<!--简写-->
<div>{{msg}}</div>
v-once:
数据只会更新一次，下次更新数据不影响dom
<div v-once>{{txt}}</div>v-html:
可以显示html元素
<div>{{tpl}}</div>
<div v-html="tpl"></div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{ msg:"Hello",txt:"Hello Vue",tpl:"<h2>上海</h2>"}});
</script>
Vue指令- v-bind
v-bind指令可以绑定元素的属性，动态给属性赋值。 比如：v-bind:class、v-bind:style、v-bind:href形式。 v-bind的简写形式：v-bind:属性名="组件中定义的数据" 简化为 : :属性名="组件中定义的数据" 上边的形式可以改写成： :class、:style、:href
<body>
<div id="app">
<div v-bind:title="msg">你好，我是大尤，你觉得Vue怎么样？</div>
<div :title="msg">你好，我是大尤，你觉得Vue怎么样？</div>
<img :src="src"/>
<a :href="href">Vue</a>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
msg:"Vue is very good",
src:"https://cn.vuejs.org/images/logo.png",
href:"https://cn.vuejs.org/"
}
});
</script>
Vue指令-class绑定
<body>
<div id="app">
绑定多个class
<div class="red green item">Vue</div>
<div :class="{red:true,green:false,item:true}">Vue</div>
使用对象classObject绑定
<div :class="classObj">Vue</div>
使用数组classList绑定
对象和数组绑定的区别： 对象可以控制class的添加和删除；数组不能控制删除
<div :class="classList">Vue</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{ classObj:{ red:true, green:false, item:true},
classList:["red","item","test"]}});
</script>
Vue指令-style绑定
<body>
<div id="app">
基础绑定style
<div style="color:red;font-size: 30px;">我是文本</div>
<div :style="{'color':'red','font-size':'30px'}">我是文本</div>
使用内联对象Object
<div :style="styleObj">我是文本</div>
使用数组对象styleList
<div :style="[styleObj,styleObj2]">我是文本</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
styleObj:{ 'color':'red', 'font-size':'30px', 'font-family':'楷体'},
styleObj2:{ 'background':'pink'}}});
</script>
Vue指令-监听事件/绑定事件
<body>
<div id="app">
count:{{count}}
v-on:事件名
<button v-on:click="count++">add</button>
@事件名
<button @click="count--">down</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{ count:0}});
</script>
Vue指令-事件方法
方法事件处理器 一般来说事件会绑定一个方法，在方法内部处理相关的事件逻辑。 需要在methods属性中定义方法，然后v-on引用对应相关的方法名。
<body>
<div id="app">
count:{{count}}
<button @click="addCount()">add</button>
<button @click="downCount">add</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
count:0
},
methods:{
addCount:function(){
this.count++;
},
downCount:function(){
this.count--;
}
}
});
</script>
Vue指令-$event
<body>
<div id="app">
count:{{count}}
<button @click="addCount($event)">add</button>
<button @click="downCount">down</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
count:0
},
methods:{
addCount:function(e){
console.log(e);
console.log(e.target.tagName);
this.count++;
},
downCount:function(){
this.count--;
}
}
});
</script>
Vue事件
事件-修饰符
在事件处理程序中调用 event.preventDefault()（阻止元素发生默认行为） 或 event.stopPropagation()（阻止事件冒泡到父元素） 是非常常见的需求。 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。
<body>
<div id="app">
<div @click="father">
<div @click="child">child</div>
</div>
stop ： 阻止event冒泡
等效于event.stopPropagation()
<div @click="father">
<div @click.stop="child">child</div>
</div>
prevent ： 阻止event默认事件
等效于event.preventDefault()
<a href="http://www.baidu.com" @click.prevent="prevent1">百度</a>
capture ： 事件在捕获阶段触发
<div @click.capture="father">
<div @click.capture="child">child</div>
self ： 自身元素触发，而不是子元素触发
<hr />
<div @click.self="father">
father
<div @click="child">child</div>
</div>
once ： 事件只触发一次
<div @click.once="child">child</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{ },
methods:{
father:function(){
console.log("父元素...");
},
child:function(){
console.log("子元素...");
},
prevent1:function(){
console.log("666....");
}
}
});
</script>
事件-键值修饰符
键值修饰符 在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
<body>
<div id="app">
<form action="http://www.shsxt.com">
<input v-on:keyup.enter="submit">
<!-- 只有在 keyCode 是 13 时调用 submit() -->
<input v-on:keyup.13="enterKey">
</form>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{ },
methods:{
enterKey:function(){
console.log("enter...");
}
}
});
</script>
Vue条件渲染
<body>
<div id="app">
v-if
当条件返回true时，执行
<div v-if="flag">你能看见我！</div>
<h3 v-if="age==18">
张三是18岁
</h3>
v-else
当if条件不满足时，执行（要结合v-if一起使用）
<h3 v-else>
张三不是18岁
</h3>
v-else-if
当满足条件时执行（要结合v-if一起使用）
<h3 v-if="age>18">
成年啦
</h3>
<h3 v-else-if="age==18">
刚成年
</h3>
<h3 v-else>
小屁孩
</h3>
v-show
满足条件时显示，不满足隐藏
<h4 v-show="flag">你能看见我！</h4>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
flag:false,
age:18
}
});
</script>
v-if 和 v-show
两者的区别是v-if是“真正”的条件渲染，只有为true时才会被渲染。v-if也是“惰性”的，假如初始条件为false，那么条件变为true时才会发生第一次渲染。 v-show只是CSS的display属性的切换，不论初始条件是否成立，都会进行html渲染，然后改变display的值为none或者block。 一般来说v-if开销比较大，如果需要频繁切换显示不显示使用v-show，需要进行条件判断的但是改变很少的使用v-if。
Vue列表渲染(v-for)
<body>
<div id="app">
v-for语法形式： item in items
可以把一组值进行列表渲染，， items 是源数据数组并且 item 是数组元素迭代的别名。
<ul>
<li v-for="item in items">{{item.name}}</li>
</ul>
v-for语法形式(item,index) in items
在 v-for 块中，对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
<ul>
<li v-for="(item,index) in items">{{type}}--{{index}}--{{item.name}}</li>
</ul>
v-for遍历对象，可指定三个形参:
形式: v-for="(value, key, index) in object" value: 对象的值 key: 对象的键 index: 遍历的索引
<ul>
<li v-for="(value,key,index) in person">{{index}}--{{key}}--{{value}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
type:"水果",
items:[
{name:'西瓜'},
{name:'苹果'},
{name:'菠萝'}
],
person:{
name:'Tim',
age:12,
love:'music'
}
}
});
</script>
v-for取值范围
<body>
<div id="root">
<h3 v-for="index in 10">{{index}}</h3>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#root"
});
</script>
key属性
<body>
<div id="app">
<ul>
<li v-for="item in items" :key="item.id">{{item.name}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
items:[
{id:1,name:'西瓜'},
{id:2,name:'苹果'},
{id:3,name:'菠萝'}
],
}
});
</script>
Vue-v-model双向绑定
Vue-v-model双向绑定作用于表单元素 v-model 用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。通过 JavaScript 在组件的 data 选项中声明初始值。 单个使用时v-model是逻辑值：true和false，多个一起使用需要指定value值，选中结果绑定v-model的数组
<body>
<div id="root">
文本框输入绑定
<input type="text" v-model="txtMsg" placeholder="请输入用户名..." />
文本值：{{txtMsg}}
复选框输入绑定
<input type="checkbox" v-model="ck" /> 选中状态：{{ck}}
<br />
<input type="checkbox" value="HTML5" v-model="lesson"> <label>HTML5</label>
<input type="checkbox" value="JavaScript" v-model="lesson"> <label>JavaScript</label>
<input type="checkbox" value="Vue" v-model="lesson"> <label>Vue</label>
<p>多选结果：{{lesson}}</p>
单选框输入绑定
<input type="radio" value="yes" v-model="love"><label>喜欢</label>
<input type="radio" value="no" v-model="love"><label>不喜欢</label>
<input type="radio" value="all" v-model="love"><label>都喜欢</label>
<p>是否喜欢: {{love}}</p>
下拉框输入绑定1
<select v-model="selected">
<option>西瓜</option>
<option>苹果</option>
<option>菠萝</option>
</select>
<h3>结果: {{selected}}</h3>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#root",
data:{
txtMsg:"",
ck:"",
lesson:[],
love:"",
selected:""
}
});
</script>
下拉框输入绑定2
<body>
<div id="root">
<select v-model="selected">
<option v-for="item in list" :value="item.value">{{item.text}}</option>
</select>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#root",
data:{
list:[
{text:'西瓜', value:'1'},
{text:'苹果', value:'2'},
{text:'菠萝', value:'3'}
],
selected:3
}
});
</script>
修饰符
修饰符
使用v-model绑定数据后，可以使用修饰进行数据处理：
<body>
<div id="app">.lazy：
绑定数据默认实时更新，lazy可以在onChange触发
<p><input type="text" v-model.lazy="name">{{name}}</p>
.number
返回数字类型的值，转换不成返回NaN
<p><input type="text" v-model.number="age"></p>
.trim
去除数据的前后空格
<p><input type="text" v-model.trim="cont"></p>
<p><button @click="show();">显示值</button></p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
name:"",
age:"",
cont:""
},
methods:{
show:function(){
console.log(this.name);
console.log(typeof this.age);
console.log(this.age);
console.log(this.cont);
}
}
});
</script>
</body>
扫一扫
2338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
