1、定义
1.1 官网地址:https://cn.vuejs.org/
官网解释为:渐进式JavaScript框架(对原始JS的封装)
1.2 渐进式:
1.3 具体来说:html中JavaScript常用语句——document.getElementByid(""),为了简化这些语句,建议使用Vue,是前后端分离的架构核心
1.4 前后端分离的交互:Vue(前)———JSON————>Springboot(后)
2、下载VUE.JS
2.1 需要联网的两种方式:
直接向html中导入两种之一(版本对应要一致)
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
或者:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
2.2 无需联网的方式:
https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js
https://cdn.jsdelivr.net/npm/vue@2
以上两个网址分别对应不同版本,网页搜索下载后导入项目即可、
3、进入实战
Ⅰ、三种输出方式:
3.1.1 代码01:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE01</title>
</head>
<body>
<div id="apa">
{{ ml }}<br/>
<h2>{{bl}}</h2>
</div>
</body>
</html>
<!-- 引入开发vue版本 -->
<script src="js/vue.js"></script>
<script>//vue元素数据要放在作用块的下面,否则找不见
var apa=new Vue({
el:"#apa" ,//元素作用:用来指定VUE实例作用范围
data:{ //数据作用:用来给VUE实例对象绑定一系列数据
ml:"CSDN欢迎您!",
bl:"你爱我我爱你 mxbc甜蜜蜜"
}
});
</script>
运行界面:
3.1.2 代码02:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE02</title>
</head>
<body>
<div id="app">
{{ml}}<br/>
{{user.name}}<br/>
{{girls[0]}}<br/>
{{users[0].name}}<br/>
{{users[2].age}}<br/>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",//作用范围
data:{
ml:"小李",
user:{name:"小米",age:33,sex:"男"},//对象属性
girls:["lia","lee","lisa"],//数组
users:[
{name:"张三",age:09,sex:"男"},
{name:"王五",age:88,sex:"男"},
{name:"李四",age:02,sex:"女"},
]//数组对象属性结合
}
})
</script>
运行界面:
3.1.3 代码03:
<div id="app">
<h2>{{ml}}您好</h2><!-- 不会覆盖标签内数值 -->
<h2 v-text="ml">您好</h2><!-- 覆盖标签内数值 -->
</div>
运行界面:
<div id="app">
<h2>{{ml}}您好</h2><!-- 不会覆盖标签内数值 -->
<h2> <span v-text="ml"></span>您好</h2><!-- 不会覆盖标签内数值 -->
</div>
运行界面:
注意:在网络不好的情况下,{{}}取值会出现插值闪烁,即加载时会出现原始代码,而后者可避免这种情况
3.1.4 代码04:
<div id="app">
<h2>{{ml}}您好</h2><!-- 不会覆盖标签内数值 -->
<h2> <span v-text="ml"></span>您好</h2><!-- 这样就不会覆盖标签内数值 -->
<h2 v-html="ml"></h2>
</div>
运行界面:
<div id="app">
<h2>{{content}}</h2>
<h2 v-text="content"></h2><!--以文本形式输出数值 -->
<h2 v-html="content"></h2><!-- 经过解析超链接后才会输出 -->
</div>
<script src="js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",//作用范围
data:{
ml:"hello vue",
age:99,
content:"欢迎来到<a href='https://www.csdn.net/?spm=1001.2014.3001.5359'>CSDN</a>",
}
})
</script>
运行界面:
Ⅱ、vue事件绑定(具体事件: JS事件.)
3.2.1 代码05:(依次绑定单击事件、鼠标移入事件、鼠标移出事件)
此代码段使用了联网方式引入VUE.JS
<body>
<div id="apa">
{{ml}}<br/><br/>
<input type="button" value="点我" v-on:click="aaa" v-on:mouseover="bbb" v-on:mouseout="ccc">
</div>
</body>
</html>
<!-- 引入开发vue版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>//vue元素数据要放在作用块的下面,否则找不见
var apa=new Vue({
el:"#apa" ,//元素作用:用来指定VUE实例作用范围
data:{ //数据作用:用来给VUE实例对象绑定一系列数据
ml:"CSDN欢迎您!",
},
methods:{
aaa:function (){
alert("VUE")
},
bbb:function(){
console.log("mouse over")//控制台输出
},
ccc:function(){
console.log("mouse out")//控制台输出
}
}
});
</script>
运行界面:
3.2.2 代码06:
<body>
<div id="apa">
<h2> {{age}}</h2><br/><br/>//双向绑定
<input type="button" value="点我年龄+1" v-on:click="ddd" >
</div>
</body>
</html>
<!-- 引入开发vue版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>//vue元素数据要放在作用块的下面,否则找不见
var apa=new Vue({
el:"#apa" ,//元素作用:用来指定VUE实例作用范围
data:{ //数据作用:用来给VUE实例对象绑定一系列数据
ml:"CSDN欢迎您!",
age:99
},
methods:{
ddd:function (){
console.log(this.age)
console.log(this);//this 对象代表当前vue实例
this.age=this.age+1;
}
}
});
</script>
运行界面:
3.2.3 代码07:
<body>
<div id="apa">
<h2> {{age}}</h2><br/><br/>
<input type="button" value="点我改变年龄" @click="eee(10,'xiaobai')" ><!--定义实参-->
</div>
</body>
</html>
<!-- 引入开发vue版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>//vue元素数据要放在作用块的下面,否则找不见
var apa=new Vue({
el:"#apa" ,//元素作用:用来指定VUE实例作用范围
data:{ //数据作用:用来给VUE实例对象绑定一系列数据
ml:"CSDN欢迎您!",
age:99
},
methods:{
eee:function (number,name){//定义形参接收实参
console.log(number);
console.log(name);
this.age=this.age+number;
}
}
});
</script>
运行界面:
3.2.4 MVVM双向绑定机制:
(Model:数据 VideMode:监听 View:页面)M中数据发生改变时能够通过监听改变V中数据,同理,即为双向绑定
4、小结
- 导入的VUE.JS标签放在html体外或作用域标签块后
- 先创建Vue对象,在el中定义作用范围,在data中定义数据名与数据值。在除却作用范围的区域内想要获取数据都是无效行为
- 获取数组值时结合下标,获取对象属性值时“对象.属性”
- 不要把作用域指向body、html,一般指向div
- 除了{{}}可以取值以外,v-text或v-html也可以取值。不同的是,前者不会重置标签内原始数据,后者会将标签内原始数据覆盖
- {{}}与v-text取值时直接将数据中的值以文本形式输出,v-html取值时先把数据中的html中的标签解析后再渲染到页面
- 使用“v-on:事件名”或“@事件名”来绑定事件(具体事件在JS事件中查看),事件定义时可简略function