一、前段框架Vue.js学习
工具： HBuilderX iDE
MVVM模式：模型、视图、视图模型
可通过官网快速入门进行上手vue官网
常规HelloWorld练习
<!--View 视图-->
<div id="app">
{
{message}}
</div>
<script type="text/javascript">
// viewmodel 视图模型
var vm = new Vue({
el:'#app',
data:{ //model 模型
message:'hellow,Vue...'
}
})
</script>MVVM本质是MVC的改进，viewmodel作为model与view的中间层，将view的状态和行为抽象化，实现视图、模型的双向数据绑定，达到M、V的分离解耦。
1、常用系统指令（重点）
- v-on事件（等同于@）
v-on:click(等同于@click)
<div id="app">
{
{message}}
<br>
<!-- <button v-on:click="fun('good')" >赋值</button> -->
<button @click="fun('good')">赋值2</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: 'hello, vue'
},
methods: {
fun:function(msg){
this.message = msg
}
}
})
</script>v-on:keydown(等同于@keydown)
<div id="app">
输入：<input v-on:keydown="fun($event)" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
},
methods: {
fun:function(e) {
var keyCode = e.keyCode
if (!(keyCode >= 48 && keyCode <= 57)){
e.preventDefault()
}
}
}
})
</script>v-on:mouseouver
<div id="app">
<div class='father' @mouseover="alert('father')">
<div class="son" @mouseover.stop="alert('son')">
</div>
</div>
</div>还有更多操作，此处不一一演示
- v-text与v-html：文本
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: '<h1>你好啊</h1>'
},
methods: {
}
})
</script>- v-bind：属性
v-bind可省略，但要:开头
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<style>
.red{
color: red;
}
.big{
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<p >Fionn</p>
<p class="red big">Fionn</p>
<p :class="{red:isRed,big:isBig}">Fionn</p>
<!-- 在数组中使用三元表达式 -->
<p :class="[ok?'red':'','big']">Fionn</p>
<!-- 直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定 -->
<p :class="[showred,'big']">Fionn</p>
<a :href="url">Fionn</a>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
isRed: true,
isBig: true,
ok: true,
showred: 'red',
url: "http://www.niubi.com"
},
methods: {
}
})
</script>
</body>
</html>
- v-model：
用于读取视图数据（表单回显）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>
<label>用户名：</label>{
{username}}<br>
<input type="text" v-model="username" />
<input type="button" value="改变值" @click="fnChange" />
</p>
<select v-model="sel">
<option value="0">大班</option>
<option value="1">中班</option>
<option value="2">小班</option>
</select>
{
{sel}}
<br />
<input type="checkbox" v-model="danCheck"/>同意用户协议<br />
<h1>{
{danCheck}}</h1>
<input type="checkbox" value="西瓜" v-model="duoCheck" />西瓜
<input type="checkbox" value="苹果" v-model="duoCheck" />苹果
<input type="checkbox" value="黄瓜" v-model="duoCheck" />黄瓜
<h1>{
{duoCheck}}</h1>
<input type="radio" value="男" v-model="sex"/>男
<input type="radio" value="女" v-model="sex" />女
<hr />
<textarea v-model="tarea"></textarea>
<h1>{
{tarea}}</h1>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
sel:'0',
username: "",
danCheck:true,
duoCheck:[],
sex:'男',
tarea:'',
},
methods: {
fnChange: function() {
this.username += 'haha'
}
}
})
</script>
</html>
- v-for
用于操作array/集合的遍历
其中参数顺序不能变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-for="item in list">
{
{item}}
</p>
<p v-for="(obj, index) in list2">
{
{index}} --- {
{obj.id}} --- {
{obj.name}}
</p>
<p v-for="(val, key, idx) in user">
{
{idx}} -- {
{key}} -- {
{val}}
</p>
<p v-for="cnt in 10">
第几次循环{
{cnt}}
</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
//数组
list: [1, 2, 3, 4, 5, 6],
//对象数组
list2: [
{id: 1, name: 'nb1'},
{id: 2, name: 'nb2'},
{id: 2, name: 'nb3'},
{id: 2, name: 'nb4'}
],
user: {
id: 1,
name: '马牛逼',
skill: 'eat shit'
}
},
methods: {
}
})
</script>
</body>
</html>
- v-if与v-show
v-if可对比jq核心标签<c:if>
v-show 类似input标签的hidden类型 visibility
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-if="ok">这是使用了v-if的p标签</p>
<p v-else>这是使用了v-else的p标签</p>
<p v-show="ok">这是使用v-show的p标签</p>
<div v-if="code=='A'">A</div>
<div v-else-if="code=='B'">B</div>
<div v-else-if="code=='C'">C</div>
<div v-else>NOT A/B/C</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
ok: true,
code: 'D'
},
methods: {
}
})
</script>
</body>
</html>
简单小结：v-on（事件处理）、v-text/v-html（文本处理）、v-bind（属性绑定）、v-model（表单回显）、v-for（循环数据）、v-if（判断）、v-show（是否显示）
2.Vuejs的生命周期
vue对象的创建、赋值、显示、改值、销毁的全过程
创建对象前，模型数据、el视图元素，不可获取，差值表达式未解析，视图区域不能显示
创建对象后， 模型数据可以获取，el视图元素不可获取，差值表达式未解析，视图区域不能显示
Dom对象挂载前，模型数据，el视图元素可获取，差值表达式未解析，视图区域不能显示
Dom对象挂载后，模型数据，el视图元素可获取，差值表达式解析，视图区域可以显示
更新数据前，模型数据发生改变，但是视图（view）并未改变
更新数据后，view改变
对象销毁前后，所有的东西都可获取
3.Vuejs ajax（异步请求处理）
- vue-resource（不在更新）
- axios
<script type="text/javascript">
//通过给定的ID来发送请求
//then表示请求成功的回调处理，与jquery ajax()函数的success属性是等价的
//catch()表示请求失败的回调处理，与jquery ajax()函数的error属性是等价的
//finally()与java异常处理类似
axios.get('/user?ID=12345').then(function(response) {
console.log(response);
}).catch(function(err) {
console.log(err);
}).finally(function() {
});
//另一种写法
axios.get('/user', {
params: {
ID: 12345
}
}).then(function(response) {
console.log(response);
}).catch(function(err) {
console.log(err);
}).finally(function() {
});
//Post请求
axios.post('/user',{
name:'张三',
age:'22'
}).then(function(res){
console.log(res);
}).catch(function(err){
console.log(err);
}).finally(function(){
});
</script>