Vue官网:
Vue.js
https://v2.cn.vuejs.org/
代码:
声明式渲染:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="mydiv">
{{info}}
</div>
<!--
<script>
//mydiv.innerHTML="这是一个div内容";
//获取元素
var d = document.getElementById("mydiv");
//设置元素内容
d.innerHTML="这是一个内容";
</script>
-->
<!--引入vue.js-->
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--定义内部js代码-->
<script>
// vue会自动监听数据和视图的变化,实现自动更新。是一种响应式编程的方式。
var xxx = new Vue({
el:"#mydiv" , //el:设置当前的vue组件,与那个页面元素关联
data:{ // data:当前元素要使用的数据对象
info:"这是vue显示出来的信息"
}
})
</script>
</body>
</html>
条件与循环:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="div1">
<!--v-bind:用于vue绑定元素属性。该关键字可以省略-->
<span v-bind:title="biaoti">
这是一个span的内容...
</span>
<a v-bind:href="site">网站</a>
</div>
<hr/>
<div class="div2">
<h1>这是一个标题</h1>
<!-- v-if:控制元素是否显示 if条件为true元素显示,否则元素不显示-->
<p v-if="isShow">这是一个段落</p>
</div>
<hr/>
<ul id="myul">
<!-- v-for:循环遍历数组-->
<li v-for="s in stus">
学号:{{s.id}} 姓名:{{s.name}}
</li>
</ul>
<!--引入vue.js-->
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--定义内部js代码-->
<script>
var vue3 = new Vue({
el:"#myul",
data:{
stus:[
{id:1001,name:"张三"},
{id:1002,name:"李四"},
{id:1003,name:"王五"},
]
}
})
//定义另外一个vue组件
var vue2 = new Vue({
el:".div2",
data:{
isShow:true
}
})
// vue会自动监听数据和视图的变化,实现自动更新。是一种响应式编程的方式。
var vue = new Vue({
el:".div1" , //绑定元素
data:{
biaoti:"这是vue定义的标题信息:"+new Date().toLocaleDateString(),
site:"http://www.jd.com"
}
})
</script>
</body>
</html>
处理用户输入:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="mydiv">
<p>{{msg}}</p>
<!--v-on:绑定vue的单击事件。v-on可以简写为@click-->
<input type="button" value="点击反转" v-on:click="fanzhuan"/>
</div>
<hr/>
<div id="mydiv2">
<p>{{msg}}</p>
<!-- v-model:实现属性的双向绑定-->
<input type="text" v-model="msg"/>
</div>
<!--引入vue.js-->
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--定义内部js代码-->
<script>
//测试v-model双向绑定
var vue2 = new Vue({
el:"#mydiv2",
data:{
msg:"初始内容"
}
})
var vue = new Vue({
el:"#mydiv",
data:{
msg:"这是一个信息内容"
},
methods:{ //用于定义vue组件特定的方法
fanzhuan:function(){
alert(123);
//反转信息,并重新设置值
this.msg=this.msg.split("").reverse().join("");
}
}
})
/*
var s = "abc";
var s1 = s.split("");//拆分字符串,返回字符数组
s1.reverse();//反转数组内容
s1 = s1.join('');//将数组元素拼接起来
alert(s1);
*/
</script>
</body>
</html>
组件化应用构建:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <div id="app">
<yzh7-zj></yzh7-zj>
<yzh7-zj></yzh7-zj>
<yzh7-zj></yzh7-zj>
<yzh7-zj></yzh7-zj>
<yzh7-zj></yzh7-zj>
<yzh7-zj></yzh7-zj>
</div> -->
<div id="app">
<!-- <stu-info v-bind:stu='{"id":1001,"name":"张三"}'></stu-info> -->
<!--
v-bind:stu 设置组件需要的对象属性
v-bind:key 通过key让vue区分清楚每个组件,作为组件标识
-->
<stu-info v-for="s in stus" v-bind:stu="s" v-bind:key="s.id"></stu-info>
</div>
<!--引入vue.js-->
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--定义内部js代码-->
<script>
Vue.component("stu-info",{
props:["stu"], //通过props可以接收外部传入组件的对象数据
template:"<p><span>学号:{{stu.id}}</span><span>姓名:{{stu.name}}</span></p>"
})
var vue = new Vue({
el:"#app",
data:{
stus:[
{id:1001,name:"张三"},
{id:1002,name:"李四"},
{id:1003,name:"王五"}
]
},
methods:{ //普通方法
mytest:function(){
}
},
beforeCreate:function(){ //生命周期函数
console.log("调用了---beforeCreate方法---")
console.log(this)
console.log(this.stus)
},
created:function(){ //生命周期函数
console.log("调用了---created---")
console.log(this)
console.log(this.stus)
},
beforeMount:function(){
console.log("调用了---beforeMount---")
console.log(this)
console.log(this.stus)
},
mounted:function(){
console.log("调用了---mounted---")
console.log(this)
console.log(this.stus)
}
})
/*
//创建vue组件
Vue.component("yzh7-zj",{
template:"<p>这是一个yzh7组件呈现的内容</p>"
})
var vue = new Vue({
el:"#app"
})
*/
</script>
</body>
</html>
组件化应用案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <div id="app">
<yzh7-zj></yzh7-zj>
<yzh7-zj></yzh7-zj>
<yzh7-zj></yzh7-zj>
<yzh7-zj></yzh7-zj>
<yzh7-zj></yzh7-zj>
<yzh7-zj></yzh7-zj>
</div> -->
<div id="app">
<p v-for="e in emps">{{e.empId}}</p>
</div>
<!--引入vue.js-->
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios用于发送ajax请求-->
<script src="./axios.min-0.19.js"></script>
<!--定义内部js代码-->
<script>
//axios 的使用:用来发起ajax请求,获取后台数据,或者向后台提交数据
axios.get("http://localhost:8080/lesson0829_HRProj_war_exploded/emp/list?page=1&limit=5").then(resp=>{
console.log(resp.data.data);
})
var vue = new Vue({
el:"#app",
data:{
emps:[]
},
created:function(){
//axios 的使用:用来发起ajax请求,获取后台数据,或者向后台提交数据
axios.get("http://localhost:8080/lesson0829_HRProj_war_exploded/emp/list?page=1&limit=5").then(resp=>{
//console.log(resp.data.data);
this.emps=resp.data.data;
})
}
})
</script>
</body>
</html>
参考: