Vue框架入门
2019-07-12 本文已影响0人
月哥说了算
VueJS介绍
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。详细介绍请查看官网。
官网地址:https://cn.vuejs.org/
首先引入vue.js文件
Snipaste_2019-07-11_21-06-35.png
Vue插值表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<!--如果id相同只有第一个起作用-->
<div id="app" >
{{user.name}}
{{msg}}
</div>
<!--拿不到值-->
<div id="app" >
{{user.name}}
{{msg}}
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
msg:"hello",
user:{"name":"丢丢","age":44}
}
})
</script>
</html>
Vue的click事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app" >
<!--
作者：offline
时间：2019-07-11
描述：v-on:click是标准方式，@click简写 方式，一般用简写方式
-->
<input type="button" value="点我试试1" v-on:click="fn1" />
<input type="button" value="点我试试2" v-on:click="fn2(1)" />
<input type="button" value="点我试试1" @click="fn1" />
<input type="button" value="点我试试2" @click="fn2(1)" />
</div>
</body>
<script>
var x=new Vue({
el:"#app",
methods:{
fn1:function(){
alert("fn1")
},
fn2:function(a){
alert(a)
}
}
})
</script>
</html>
Vue按键事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<!--
作者：gzy
时间：2019-07-11
描述：触发的按钮可以是按键编号（记不住，一般不用），所以都直接用按键名，如：enter。。
-->
<input type="text" value="" @keyup.enter="fn1" />
</div>
</body>
<script>
var x=new Vue({
el:"#app",
data:{
},
methods:{
fn1:function(){
//事件源
alert(event.keyCode);
}
}
})
</script>
</html>
鼠标悬停事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<style>
div{
border: 1px solid red;
}
</style>
</head>
<body>
<!--
作者：gzy
时间：2019-07-11
描述：鼠标悬停事件
-->
<div id="app" @mouseover="fn1" style="border:1px solid red;height: 20px;" >
</div>
</body>
<script>
var x=new Vue({
el:"#app",
data:{
},
methods:{
fn1:function(){
alert(event)
}
}
})
</script>
</html>
事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。 Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop ：事件不冒泡，及不触发父容器事件。
.prevent：取消默认点击事件，如<a>跳转事件
.once:只能点击一次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app" @click="fn2" style="border:1px solid #FF0000;height: 50px;" >
<!--
作者：gzy
时间：2019-07-11
描述：只能点击一次切不触发<a>跳转事件
-->
<a href="http://www.taobao.cn" @click.prevent @click.once="fn1" >跳转到淘宝</a>
<!--
不触发<a>跳转事件，不触发父容器事件
-->
<a href="http://www.baidu.com" @click.prevent.stop="fn1" >跳转到百度</a>
</div>
</body>
<script>
var x=new Vue({
el:"#app",
data:{
},
methods:{
fn1:function(){
alert("被点击了1..");
},
fn2:function(){
alert("被点击了2..");
}
}
}
</script>
</html>
vue的v-text和v-html绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app" xx="yy">
<!--
作者：gzy
时间：2019-07-11
描述：写啥都是文本
-->
<p v-text="msg"></p>
<!--
可以 识别html代码
-->
<p v-html="msg"></p>
</div>
</body>
<script>
var x=new Vue({
el:"#app",
data:{
msg:"我是一条消息<a href='http://www.baidu.com'>点我去百度</a>"
}
})
</script>
</html>
vue的v-bind属性绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app" >
<!--
标准方式属性绑定
-->
<p v-bind:title="product.title">{{product.pname}}</p>
<p><font v-bind:color="product.color">就是这个颜色</font></p>
<hr>
<!--
简写方式属性绑定
-->
<p :title="product.title">{{product.pname}}</p>
<p><font :color="product.color">就是这个颜色</font></p>
</div>
</body>
<script>
var x=new Vue({
el:"#app",
data:{
product:{pname:"小米手机红色版",color:'green',title:"放上来看看...."}
}
})
</script>
</html>
vue的v-model数据双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app" >
用户名:<input type="text" v-model:value="user1.username" /><br />
密码:<input type="text" v-model:value="user1.password" /><br />
<input type="button" value="点我是不是双向绑定" @click="fn" />
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
user1:{username:"小明",age:18,password:123}
},
methods:{
fn:function(){
//alert(this.user1.username+";;;;"+this.user1.password)
this.user1.username="双向绑定喽奥"
}
}
})
</script>
</html>
vue的v-for循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<table border="1px" cellspacing="0px" align="center" width="70%">
<thead>
<th>名字</th>
<th>年龄</th>
<th>密码 </th>
</thead>
<tbody>
<tr v-for="user in users">
<td>{{user.username}}</td>
<td>{{user.age}}</td>
<td>{{user.password}}</td>
</tr>
</tbody>
</table>
<ul>
<li v-for="(u,index) in users">
{{u.username}}
</li>
</ul>
<p v-for="(pvalue,pname) in user">
{{pvalue}}----{{pname}}
</p>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
users:[
{username:"小明",age:18,password:123123},
{username:"小红",age:18,password:1231231},
{username:"小绿",age:20,password:1231}
],
names:["大郎","次郎","莲莲"],
user:{username:"小明",age:18,password:123123}
}
})
</script>
</html>
v-if与v-show
v-if是根据表达式的值来决定是否渲染元素（当值为false时元素根本不会创建）。
v-show是根据表达式的值来切换元素的display css属性（当值为false时，元素只是单纯的隐藏，元素还是存在的）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app" >
<div v-if="flag">{{user1.username}}</div>
<div v-show="flag">{{user1.username}}</div>
<input type="button" value="点我切换" @click="fn1" />
</div>
</body>
<script>
var x=new Vue({
el:"#app",
data:{
user1:{username:"小明",age:18,password:123},
flag:true
},
methods:{
fn1:function(){
this.flag=!this.flag;
}
}
})
</script>
</html>
VueJS生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue生命周期 </title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
//创建vue对象
var vm = new Vue({
el:"#app", // 选择器 $("#app")
data:{
message:"hello"
},
beforeCreate: function() {
// console.log(this);
showData('创建vue实例前', this);
},
created: function() {
//写ajax请求 后端服务器 要数据...
showData('创建vue实例后', this);
},
beforeMount: function() {
showData('挂载到dom前', this);
},
mounted: function() {
showData('挂载到dom后', this);
},
beforeUpdate: function() {
showData('数据变化更新前', this);
},
updated: function() {
showData('数据变化更新后', this);
},
beforeDestroy: function() {
vm.test = "3333";
showData('vue实例销毁前', this);
},
destroyed: function() {
showData('vue实例销毁后', this);
}
});
function showData(process, obj) {
console.log(process);
console.log('data 数据：' + obj.message)
console.log('挂载的对象：')
console.log(obj.$el)
realDom();
console.log('------------------')
console.log('------------------')
}
function realDom() {
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
}
vm.message = "hello world";
vm.$destroy(); //销毁
</script>
</body>
</html>
VueJS ajax
vue-resource
vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以。
vue-resource的github: https://github.com/pagekit/vue-resource
axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
axios的github:https://github.com/axios/axios
引入axios
首先就是引入axios,如果你使用es6，只需要安装axios模块之后
import axios from 'axios';
//安装方法 npm install axios
//或bower install axios
当然也可以用script引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
为什么推荐用axios
其实他本质和jquery的ajax请求是相同的，都是回调函数，服务端不响应，就不会往下执行，但是它提供了语法糖，让开发者用的舒服些。
使用案列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/axios-0.18.0.js" ></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script>
new Vue({
el:"#app",
data:{
msg:""
},
created:function(){
//域问题：ajax请求里用this指的是整个页面所以需
//将vue对象 传给一个变量，再在ajax里使用。
var x=this;
//发请求
axios.get('http://localhost:8080/user/test/1')
.then(function (re) {
x.msg=re.data;
})
}
})
</script>
</body>
</html>
上面代码用拉姆达表达式写法（推荐）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/axios-0.18.0.js" ></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script>
new Vue({
el:"#app",
data:{
msg:""
},
created:function(){ axios.get('http://localhost:8080/user/test/1')
.then( (resp)=> {
//这里的this直接就代表 vue对象
this.msg=re.data;
})
}
})
</script>
</body>
</html>
