Vue
在特定场景下,遇到特定问题,需要套用固定的解决方案去解决。
Vue为JavaScript的框架
1.框架的HelloWord
1.对Vue框架搭建一下
a.将框架代码,引入到网页内
<script src="Vue.js"></script>
b.设置一个区域(Vue要操作的区域)
<div id="app"></div>
c.在这个区域的下方,创建Script标签,new Vue()对象
<script>
new Vue();
</script>
d.给Vue对象传递一个JS对象(通过{}方式创建的js对象)
<script>
new Vue({
"el":"#app",//el是选择Vue可操作的区域
"data":{},//设置数据模型
"methods":{}
});
</script>
2.功能实现
a.设置数据模型
"data":{
"msg":"div的内存"
},//设置数据模型
b.将Vue对象中的数据模型和网页的标签做一个绑定关系
<div id="div01">{{msg}}</div> 插值表达式
c.当你想要操作div中的内容时,都可以转换操作msg
在元素上绑定事件
<input type="button" value="获得div中的内容" @click="getText" />
<input type="button" value="设置div中的内容" @click="setText" />
在Vue对象的method里面创建函数
"methods":{
"getText":function (){
alert(this.msg)
},
"setText":function (){
this.msg = "Vue设置的新值"
}
}
2.声明式渲染
3.Vue操作了标签体(双标签中的内容)
插值表达式:{{数据模型的key值}}
4.Vue可以操作属性值
1.单向绑定 (修改数据模型 html页面同步效果 但是用户修改html属性值,数据模型不随之改变)
语法:v-bing:原属性名=“数据模型的key值”
案例:
数据模型:
"data":{
"msg":"div内容",
"username":"admin"
},
HTML代码:
<input type="text" v-bind:value="username"/>
简写::原属性名=“数据模型的key值”
2.双向绑定
语法:v-model:原属性名=“数据模型的key值”
案例:
数据模型:
"data":{
"msg":"div内容",
"username":"admin"
},
HTML代码:
<input type="text" v-model:value="username"/>
简写:v-model = “数据模型的key值”
v-model.trim = “数据模型的key值”
5.条件渲染
功能:控制元素是否显示
1.v-if true显示 false不显示
data:{
flags:true,
},
<div v-if="flag">div1</div>
不显示标签直接删掉
2.v-else true不显示 false显示
不能单独使用,需要和v-if一起使用
v-if和v-else中间不能有多余标签
3.v-show true显示 false不显示
不显示是通过css样式设置隐藏
6.列表渲染
位置:循环哪个标签,v-for就加在哪个标签上
语法:v-for=“”
1.简单数组
data:{
hobbys:["java","抖音","大数据","前端","网络安全","UI"]
},
<ul>
<li v-for="hobby in hobbys">{{hobby}}</li>
</ul>
2.对象数组
computers:[
{id:101,bread:"联想",price:5000},
{id:102,bread:"外星人",price:15000},
{id:103,bread:"诺基亚",price:4000}]
},
<table>
<tr>
<th>编号</th>
<th>品牌</th>
<th>价格</th>
</tr>
<tr v-for="computer in computers">
<td>{{computer.id}}</td>
<td>{{computer.bread}}</td>
<td>{{computer.price}}</td>
</tr>
</table>
需要索引的语法:v-for=“(变量,index) in 数组”
7.事件驱动
语法: v-on:事件类型=“函数调用”
案例:
<!-- 单击事件绑定-->
<input type="button" value="按钮" v-on:click="clickTest"/><br/>
<!-- 值改变绑定-->
<input type="text" v-on:change="changeTest">
methods:{
clickTest:function (){
alert("单击事件绑定成功")
},
changeTest:function (){
alert("值改变事件绑定成功")
}
}
简写:v-on:click=“clickTest” ----------> @click=“clickTest”
========================
clickTest:function (){
alert(“单击事件绑定成功”)
},
----->
clickText(){
alert(“单击事件绑定成功”)
}
取消控件的默认行为
1.超链接
JS: event.preventDefault();//取消控件的默认行为
Vue: @click.prevent="clickText" 缺点:百分百取消
2.表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="Vue.js"></script>
</head>
<body>
<div id="app">
<a href="http://baidu.com" @click.prevent="clickText">点击跳转到百度</a>
<form action="01_HelloWord.html" method="" @submit="submitText">
<input type="text" name="username"/> <br/>
<input type="submit">
</form>
</div>
<script>
new Vue({
el:"#app",
data:{},
methods:{
clickText:function (){
alert("点击了超链接")
//如果不想让超链接进行跳转
//event.preventDefault();//取消控件的默认行为
},
submitText:function (){
alert("表单即将被提交")
// event.preventDefault();
}
}
})
</script>
</body>
</html>
阻止事件冒泡
JS: event.stopPropagation();//阻止事件冒泡
Vue: @click.stop="div2Text"
8.属性的监听
功能:当数据模型的数值发生变化时,被Vue检测到,然后执行一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="Vue.js"></script>
</head>
<body>
<div id="app">
<p>尊姓:{{firstName}}</p>
<p>大名:{{lastName}}</p>
<input type="text" v-model="firstName"><br/>
<input type="text" v-model="lastName"><br/>
<p>全名:{{fullName}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
firstName:"詹姆斯",
lastName:"哈登",
fullName:"詹姆斯.哈登"
},
methods:{},
// 写属性的监听
watch:{
//当firstName的属性值发生变化时,这个函数就会被调用
firstName: function (){
this.fullName = this.firstName+"."+this.lastName;
},
lastName:function (){
this.fullName = this.firstName+"."+this.lastName;
}
}
})
</script>
</body>
</html>