本人是一名Android开发人员，最近项目前端人员吃紧，于是开始了vue的自学之旅。
vue简介
https://cn.vuejs.org 作者:尤雨溪
- JavaScript框架
- 简化Dom操作
- 响应式数据驱动（数据驱动视图）
vue第一个程序
- 导入开发版本的Vue.js
- 创建Vue实例对象, 设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上
<body>
<div id="app">
<!-- 使用简洁的模板语法把数据渲染到页面上 -->
{{ message }}
</div>
<!-- 导入开发版本的Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建Vue实例对象, 设置el属性和data属性
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
el:挂载点，绑定页面元素
- Vue会管理el选项命中的元素及其内部的后代元素
- 可以使用其他的选择器,但是建议使用ID选择器
- 可以使用其他的双标签,不能使用HTML和BODY
MVVM
Vue指令
以v-开头的一组特殊语法,分为三类介绍
1. v-text, v-html, v-on
内容绑定，事件绑定
- I. v-text （不如差值表达式好用）
设置标签的文本值(textContent)
<body>
<div id="app">
<!-- 设置标签的文本值(textContent) -->
<h2 v-text="message+'!'">深圳</h2>
<h2>{{ message +'!'}}深圳</h2>
</div>
<!-- 导入开发版本的Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建Vue实例对象, 设置el属性和data属性
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
}
})
</script>
</body>
网页渲染：
Hello Vue!
Hello Vue!深圳
总结：
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容。
- II. v-html
设置标签的innerHTML
<body>
<div id="app">
<!-- 设置标签的innerHTML -->
<p v-html="message"></p>
<p v-text="content"></p>
<p v-html="content"></p>
</div>
<!-- 导入开发版本的Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建Vue实例对象, 设置el属性和data属性
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
content: '<a href="https://cn.vuejs.org/">Hello Vue</a>'
}
})
</script>
</body>
网页渲染：
总结
v-text指令无论内容是什么,只会解析为文本
v-html当内容中有html结构会被解析为标签，没有才解析为文本
- iii. v-on
为元素绑定事件
<body>
<div id="app">
<!-- 为元素绑定事件 -->
<input type="button" value="v-on指令" v-on:click="doIt">
<!-- 指令可以简写为@ -->
<input type="button" value="v-on@" @click="doIt">
<!-- 传递参数-->
<input type="button" value="v-on带参" @click="doIt1('you can ','you up')">
<!-- 对事件进行限制, 限制触发的按键为回车-->
<input type="text" @keyup.enter="sayHi">
</div>
<!-- 导入开发版本的Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建Vue实例对象, 设置el属性和data属性
var app = new Vue({
el: '#app',
methods: {
doIt:function(){
console.log("无聊");
},
doIt1:function(p1,p2){
console.log(p1 + p2);
},
sayHi:function(){
alert("一边去");
}
},
})
</script>
</body>
总结
事件绑定的方法写成函数调用的形式，可以传入自定义参数
事件的后面跟上 .修饰符对事件进行限制，@keyup.enter可以限制触发的按键为回车
vue方法不可以重载哦
2. v-show, v-if, v-bind
- i. v-show, v-if
根据表达值的真假,切换元素的显示和隐藏
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<!-- 根据表达值的真假,切换元素的显示和隐藏 -->
<p v-show="isShow">冻死了---v-show</p>
<p v-if="isShow">冻死了</p>
</div>
<!-- 导入开发版本的Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建Vue实例对象, 设置el属性和data属性
var app = new Vue({
el: '#app',
data: {
isShow: false,
},
methods: {
changeIsShow: function () {
this.isShow = !this.isShow;
},
}
})
</script>
</body>
点击切换，发现v-show和v-if都能实现元素显示状态的切换，它们之间有啥区别呢，右键点击inspect进入调试模式，可以发现隐藏时，它们是有区别的
<div id="app">
<input type="button" value="切换显示状态">
<p style="display: none;">冻死了---v-show</p>
<!---->
</div>
总结
根据真假切换元素的显示状态，指令后面的内容,最终都会解析为布尔值
v-show原理是修改元素的display,实现显示隐藏
v-if本质是通过操纵dom元素来切换显示状态
频繁切换用v-show，一次性用v-if
- ii.v-bind
设置元素的属性(比如:src,title,class)
设想有一个需求，需要动态展示图片，你可能会说vue不就是数据驱动视图嘛
定义一个变量imgUrl,不断修改imgUrl的值不就完了
<img src={{imgUrl}}/>
可是浏览器一运行，立马打脸。原来差值表达式{{}}只能修改元素的值（尖括号外面的），不能修改元素的属性。
以下是一个动态更新猫图的网页，借用v-bind实现，api.thecatapi.com可以返回各种猫图
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>v-bind指令</title>
</head>
<body>
<div id="app">
<img v-bind:src="imgUrl" height="300" width="300"/>
<!-- 简写的话可以直接省略v-bind -->
<img :src="imgUrl" height="300" width="300"/>
</div>
<!-- 导入开发版本的Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建Vue实例对象, 设置el属性和data属性
var app = new Vue({
el: '#app',
data: {
imgUrl: "https://cdn2.thecatapi.com/images/73q.jpg",
},
methods: {
start: function () {
this.loadURL();
setInterval(this.loadURL, 3000);
},
loadURL: function() {
var _this = this;
ajax_get('https://api.thecatapi.com/v1/images/search?size=full', function(data) {
var url = data[0]["url"];
console.log("url: " + url);
_this.imgUrl = url;
});
},
}
});
app.start();
// 定义网络请求函数
function ajax_get(url, callback) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// console.log('responseText:' + xmlhttp.responseText);
try {
var data = JSON.parse(xmlhttp.responseText);
} catch (err) {
console.log(err.message + " in " + xmlhttp.responseText);
return;
}
callback(data);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
</script>
</body>
</html>
总结
v-bind 经常用于修改class，实现不同的显示状态, 只是单向变动
对象的方式
<img v- bind:class="{active:isActive}"></div>
三目表达式
<i :class="isPlaying && index == controlItem?'list_menu__icon_pause':'list_menu__icon_play'"></i><span
v-bind和v-model区别：
https://blog.csdn.net/u011486491/article/details/90232280
v-bind
html中的属性、css的样式、对象、数组、number 类型、bool类型
v-model
主要是用在表单元素中，它实现了双向绑定。在同事使用v-bind和v-model中，v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权，会强制实行双向绑定。很多时候v-model使用在表单的<input>中实现双向绑定
网友评论