vue 用于构建用户界面的渐进式框架
如何引用(使用)vue
1.直接引入vue.js文件 在head里面写
没有网络也可以使用
在该网址中下载如图所示文件https://cn.vuejs.org/v2/guide/installation.html
然后该文件引入项目中 在html文档里script引用
2.通过cdn方式引入 在head里面写
没有网络不能使用
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js" ></script>
3.通过脚手架cli方式引入,初学者不推荐
创建vue项目
1.引入vue文件(以上三种都可以) head里面 title下面
2.视图部分 写在body中 html页面内容
3.脚本部分 写在script中
vue模板的语法 V大写
1.定义不同类型的数据data: 在脚本中定义 在视图页面使用 {{键名}} 数据都是采用键值对的方式定义的
视图部分:
<div id="app">
<!-- 视图中通过双花括号形式展示数据 -->
数字: {{msg}}
<p>字符串: {{msg2}}</p>
<p>小数: {{numfloat}}</p>
<p>布尔类型: {{bool}}</p>
<p>数组: {{arr}}</p>
</div>脚本部分:
//创建vue对象 数据都是采用键值对的方式定义的
var vm = new Vue({
//元素--要定位的元素
el:"#app",//el是element的简写 代表元素
//数据--要绑定的数据
data:{//依然采用键值对方式定义
msg:123,
msg2:"hello",
numfloat:123.4,
bool:true,
arr:[1,2,3,4]
}
});页面效果:
2.关于字符串拼接符号+ 符号两端有一段是字符串 +做拼接作用
3.关于算数运算符+ (同数学) 两端为数字类型参与+运算
其他三个符号按照数学形式正常运算 包括符号两端有数字类型的字符串也会正常运算
4.取整 (支持js方法) Math.floor(值)
视图部分: <p>+拼接: {{msg+msg2}}</p> <!-- 因为+两遍有字符串 -->
<p>+加法运算符: {{msg+numfloat}}</p>
<p>支持js函数: {{Math.floor(numfloat)}}</p><!-- Math.floor向下取整 -->
<p>支持三元运算符: {{msg>numfloat?msg : numfloat}}</p>
脚本部分: <script type="text/javascript">
var vm = new Vue({
//元素--要定位的元素
el:"#app",//el是element的简写 代表元素
data:{//依然采用键值对方式定义
msg:123,
msg2:"hello",
numfloat:123.4,
bool:true,
arr:[1,2,3,4]
}
});
</script>页面效果:
5.调用方法methods 在脚本中定义方法 在视图中调用方法 调用函数: {{方法名(键名)(参数)}} 采用键值对方式定义
视图内容: 调用函数: {{sayHi()}}
<br>
调用函数:{{sayHello('哈哈哈')}}
脚本内容: <script type="text/javascript">
//创建vue对象 数据都是采用键值对的方式定义的
var vm = new Vue({
//元素--要定位的元素
el:"#app",//el是element的简写 代表元素
methods:{//依然采用键值对方式定义
sayHi:function(){
alert("Hi...");
},
sayHello:function(a){
alert(a);
}
}
});
</script>页面效果:
6.修改data数据
方式一: vm.$data.msg = 256;
方式二: vm.msg = 345;
var vm = new Vue({
//元素--要定位的元素
el:"#app",//el是element的简写 代表元素
//数据--要绑定的数据
data:{//依然采用键值对方式定义
msg:123
}
});
//修改data数据
vm.$data.msg = 256;
vm.msg = 345;MVC思想
M:model 模型层
V:view 视图层
C:Controller 控制层
Controller 负责将model的数据在view中显示出来 换句话说在controller里面把model赋值给view
MVVM思想
M:model 模型层
V:view 视图层
VM: ViewModel视图模型层
他有两个方向
1是将模型转换为视图 将后端传递的数据转换为所看到的页面 实现方式:数据绑定
2是将视图转换为模型 将所看到的页面转化为后端数据 实现方式:DOM事件监听
MVC和MVVM的区别
MVC是单向的 MVVM是双向的
vue指令 是指有v-前缀的特殊属性叫做指令
1.v-text 表示文本
针对于文本可以使用{{msg}}双花括号形式展示,但是在js没有加载完的时候会显示文本{{msg}} 源代码 看起来不太好
所以可以使用v-tet标签替换
例如:<p>{{msg}}</p> 替换为 <p v-text="msg"></p>
视图部分:
使用v-txt属性展示数据:<p v-text="txt"></p> //展示结果为abc--txt
脚本部分;
new Vue({
//元素--要绑定的元素
el:"#app",
//数据--要绑定的数据
data:{
txt:"abc--txt",
}
})2.v-html 可以识别标签的文本
针对于解析带有html的文本 v-txt指令不能识别html标签 所有内容当做纯文本看待,
为了真正可以输出带有html标签的内容 可以使用v-html指令
例如<p v-html="txt2"></p>
视图部分:
使用v-txt属性展示数据:<p v-text="txt2"></p>//显示结果为<h3>abc--txt2</h3>
使用v-html属性展示数据:<p v-html="txt2"></p>//显示结果为标题3规格的abc--txt2脚本部分:
new Vue({
//元素--要绑定的元素
el:"#app",
//数据--要绑定的数据
data:{
txt2:"<h3>abc--txt2</h3>",
}
})注意:在站点上动态渲染任何html可能都会存在危险,因为很容易遭到xss攻击,
请只对可信任的内容使用html插值(v-html),绝对不要对用户输入内容使用插值
xss攻击
跨站脚本攻击 通常指的是利用网络开发时留下的漏洞 使用巧妙的方法 注入恶意代码或者恶意指令到网页 使用户加载并且执行攻击者恶意制造的网页程序
3.v-bind指令 可以用于响应式更新html属性
书写形式:v-bind:属性 ="值(键名)" 简写方式为 :属性="值(键名)"
视图部分:
<a v-bind:href="path">这是一个链接</a>
<!-- 可以简写 如下 -->
<a :href="path">这是一个链接</a>脚本部分:
new Vue({
//元素--要绑定的元素
el:"#app",
//数据--要绑定的数据
data:{
path:"https://www.baidu.com"
}
})4.v-if v-else v-else-if 表示选择性执行
v-if指令 可以根据表达式的真假 来插入或者删除元素
v-else指令 表示v-if的else块,必须跟v-if一起使用 或者v-else-if一起使用 否则不识别
v-else-if:指令表示v-if的else-if块,可以连续使用
视图部分:
<!-- v-if 可以根据表达式的真假 来插入或者删除元素 -->
<p v-if="zhi">你是个好人</p>//值为真 所以执行该标签 视图显示你是个好人
<p v-else >你是坏人</p>//v-if执行了所以带有v-else属性的标签就不执行 视图上不显示你是坏人
<p v-if="2<3" >" 2小于3 "</p>
<p v-else-if="2>3" >" 2大于3 "</p>
<p v-else="2=3" >" 2等于3 "</p>
//这三个语句中 只有第一个为true 其他两个不执行脚本部分:
new Vue({
//元素--要绑定的元素
el:"#app",
//数据--要绑定的数据
data:{
zhi:true
}
})5.v-show 指令根据表达式的值的真假 来显示或隐藏元素
视图内容:
<p v-show="zhi">今天周五啦</p>//因为zhi为true 所以在视图上显示 今天周五啦脚本内容:
new Vue({
//元素--要绑定的元素
el:"#app",
//数据--要绑定的数据
data:{
zhi:true
}
}) v-if和v-show指令的区别?(面试题)
相同点
v-if和v-show都可以动态的控制DOM元素 显示和隐藏
不同点
v-if的显示和隐藏是将DOM元素整个添加和删除
而v-show隐藏则为该元素添加css属性display:none 但是DOM元素还在
6.v-on:代表事件 用于DOM监听取缔js的document
视图部分:
<input type="button" value="按钮" v-on:click="oclick()"/>
//此时一按按钮就会执行oclick()函数 弹框"还有半个小时吃饭了"脚本内容:
new Vue({
//元素--要绑定的元素
el:"#app",
methods:{
//方法名:方法体
oclick:function(){
alert("还有半个小时吃饭了")
}
}
})指令练习 点击按钮将图片收起 再点击按钮图片显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 点击按钮将图片收起
再点击按钮图片显示-->
<script src="vue.min.js" ></script>
</head>
<body>
<!-- 视图 -->
<div id="d1">
<img v-bind:src="s" v-show="msg" >
<input type="button" v-on:click="a()" value="按钮" />
</div>
</body>
<script type="text/javascript">
// 脚本
new Vue({
//元素
el:"#d1",
//绑定数据
data:{
s:"1.jpeg",
msg:true
},
methods:{
a:function(){
// if(this.msg){
// this.msg = false
// }else{
// this.msg = true
// }
this.msg = !this.msg;
}
}
})
</script>
</html>
7.v-model指令 自动获取视图上被输入的内容
在表单input textarea select 元素上创建双向绑定 它会根据控件类型
自动选取正确的方法来更新元素
视图部分:
<!-- 视图部分 -->
<div id="app">
<!-- v-model指令 实现数据的双向绑定 -->
<input type="text" v-model="msg1"/>文本框中的内容:{{msg1}}
<br>
<textarea v-model="msg2"></textarea>文本域内容:{{msg2}}
<br>
<!-- v-model指令 复选框 -->
<input type="checkbox" v-model="checks" value="1"/>篮球
<input type="checkbox" v-model="checks" value="2" />足球
<input type="checkbox" v-model="checks" value="3" />羽毛球
<br>复选框内容是:{{checks}}//视图显示结果为所选项的value值 比如 选中足球时 显示2
<br>
<!-- v-model指令 单选按钮 -->
<input type="radio" value="1" v-model="sex"/>男
<input type="radio" value="2" v-model="sex"/>女
<br>
单选按钮的值:{{sex}}//视图显示结果为所选项的value值 比如 选中男时 显示1
</div>脚本部分:
new Vue({
//元素
el:"#app",
//要绑定的数据
data:{
msg1:"",
msg2:"",
checks:[],//因为复选框有多个选择结果 所以为数组
sex:""//因为是想获取在页面中输入的内容 所以初始都为""
},
})8. v-for指令 遍历数组 基于一个数组来渲染一个列表 需要使用item-in-items的形式来定义 a,index in arr arr表示数组名 a是数组中元素的别名 index索引 只能在in前面
v-for遍历数组
v-for指令 遍历数组 a,index in arr arr表示数组名 a是数组中元素的别名 index索引 只能在in前面
v-for遍历对象
v-for指令 遍历对象 value,key in obj obj表述对象名 key是对象中属性名 value是对象中属性值
视图部分:
<div id="app">
<!-- v-for指令 遍历数组 arr表示数组名 a是数组中元素的别名 index索引 只能在in前面-->
<p v-for="a,index in arr">
{{a}}---{{index}}
//页面效果为11---0 22---1 33---2 44---3 55---4
</p>
<!-- v-for指令 遍历对象 obj表述对象名 key是对象中属性名 value是对象中属性值-->
<p v-for="value,key in obj">
{{key}}---{{value}}
//页面效果为uname---张三 usex---1 birth---1900-1-1
</p>
</div>脚本部分:
// 创建vue对象
new Vue({
//元素
el:"#app",
//数据
data:{
arr:[11,22,33,44,55],
obj:{//采用键值对方式定义
uname: "张三",
usex:1,
birth:"1900-1-1"
}
}
})指令练习 要求鼠标单击无序列表里的内容 上方文字框就会显示相应内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js -->
<script src="vue.min.js" ></script>
</head>
<body>
<div id="app">
<input type="text" :value="msg"/>
<ul>
<li v-for="a in arr" v-on:click="show(a)" >{{a}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"",
arr:["熊大","熊二","喜洋洋","玛卡巴卡","奥特曼","猪猪侠"]
},
methods:{
show:function(a){
this.msg = a
}
}
})
</script>
</html>
扫一扫
1733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
