Vue语法学习
vue基础实例
第一个实例：显示message内容
<div id="app">
{{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
el为挂载点，创建一个Vue实例命名后，就可以在id为挂载点处调用Vue实例中的内容
data为Vue实例中的内容
v-text
v-text可以写在标签内部与{{}}相同
<h2>{{campus[1]}}</h2>
<h2 v-text="message"></h2>
如果要进行字符串拼接，在{{}}进行+ “string内容”，或是v-text=“message + ‘string内容’”
v-text指令作用是：设置标签内容textContent
默认写法替换全部内容使用差值表达式{{}}可以代替指定内容
v-html
Vue实例2展示（v-text v-html）
<body>
<div id="app1">
{{ message }}
{{age}}
<h2>{{campus[1]}}</h2>
<h2 v-text="message"></h2>
<h2 v-html="content"></h2>
</div>
</body>
<script>
var app = new Vue({
el: '#app1',
data: {
message: 'Hello Vue!',
age:100,
campus:[
'beijing','nanjing','cixi'
],
content:"<a href='http://www.baidu.com'> abc</a>"
}
})
</script>
- v-html指令的作用是：设置元素的innerHTML
- 内容有html结构会被解析为标签
- v-text只能解析成文本
v-on基础
为元素绑定事件
- v-on:click=‘方法’ 或 @click=‘方法’
- v-on:monseeenter='方法’或 @monseeenter=‘方法’
- v-on:dbclick='方法’或 @dbclick=‘方法’
在Vue实例中增加方法在methods对象中
Tips：methods与data是并列的
<script>
var app = new Vue({
el: '#app1',
data: {
message: 'Hello Vue!',
},
methods:{
doIt(){
console.log("do it ");
}
},
})
</script>
或者也可写成
doIt:function(){
console.log("do it ");
}
Tips：如果方法要修改数值，一定要添加this
- v-on指令的作用是：为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods中
- 方法内部通过this关键字可以访问定义在data中数据
计数器
计数器的实例
<body>
<div id="app1">
<div class="input-num">
<button @click="add">
+
</button>
<span>{{num}}</span>
<button @click="sub">
-
</button>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app1',
data: {
message: 'Hello Vue!',
num:1
},
methods:{
add(){
if(this.num >= 10){
this.num = 10;
}else{
this.num ++;
}
},
sub(){
if(this.num <= 0){
this.num = 0;
}else{
this.num --;
}
}
},
})
</script>
v-show 和 v-if
-
v-show指令作用：根据真假切换元素的显示状态
-
原理是修改元素的display值
-
指令后的内容都会被解析为布尔值
-
值为true显示，false隐藏
-
v-if指令：根据表达式的真假切换元素显示状态
-
本质是通过操作dom元素切换显示状态
-
表达式为true，元素存在于dom树中，反之。
v-bind
<img :src="imgSrc" :title="imgTitle" :class="isActive?'active':''" @click="toggle">
<img :src="imgSrc" :title="imgTitle" :class="{active:isActive}" @click="toggle">
{{isActive}}
图片切换
-
定义图片数组
-
添加图片索引
-
绑定src属性
-
图片切换逻辑
-
显示状态切换
v-on补充
<div id="app1">
<input type="button" value="点击" @click="doIt(123)" />
<input type="text" @keyup.enter="sayHi"/>
</div>
var app = new Vue({
el: '#app1',
methods:{
doIt(p1){
console.log("abc")
console.log(p1)
},
sayHi(){
alert("吃了吗");
}
}
})
v-model
-
获取和设置表单元素的值（双向数据绑定）
-
v-model指令作用是便捷的设置和获取表单元素的值
-
绑定的数据会和表单元素值相关联
-
绑定的数据为双向表单元素的值
具体项目
小黑笔记本
用于记录笔记
功能
- 新增
- 删除
- 统计
- 清空
- 隐藏
1.新增
-
生成列表结构（v-for 数组）
-
获取用户输入
-
回车，新增数据
<input v-model=“inputValue” @keyup.enter=“add” autofocus=“autofocus” autocomplete=“off” placeholder=“请输入”/>
- {{ index+1 }}.
2.删除
-
点击删除指定内容（v-on splice 索引）
<button class=“destory” @click=“remove()”>删除
remove(index){
this.list.splice(index,1);
}
3.统计
<footer class='todo_count'>
<strong>{{list.length}}</strong>
</footer>
4.清空
<button @click="clear">清空</button>
clear(){
this.list = [];
}
Vue网络应用
- axios必须先导入才可以使用
- 使用get活post方法即可发送对应的请求
- then方法中的回调函数会在请求成功或失败时触发
- 通过回调函数的形参可以获取相应内容，或错误信息
扫一扫
4449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
