标签：vue name 渲染 url vm 语法 Vue var data
1.vue介绍
1.Vue是一套用于构建用户界面的渐进式框架。
2.M-V-VM 架构思想:
M：Model 数据层 js的数据
V：View 视图层 html，css
VM：ViewModel vue做出来的介于M和V之间的一层，以后不需要手动进行dom操作了
作用：以后页面变，js变量就变，js变量变，页面就变
3.vue版本:
1.X：使用得较少
2.X：普遍使用（蛮多）
3.X：出了很久了，公司里新项目会选择
-语法有差距，但是vue3完全兼容vue2
-你可以在vue3上写vue2，但是官方不建议了
4.可以通过以下两种方式导入:
1.下载本地文件:把源码放在js文件中，导入: <script src="js/vue.js"></script>
2.通过cbd导入:<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
2.插值语法
2.1 mvvn演示
v-model:输入框指定的默认值(只能存一个变量名)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script> <!--通过本地引入js文件-->
</head>
<body>
<div id="d1">
{{name}}
<br>
<input type="text" v-model="name">
</div>
</body>
<script>
new Vue({
el:'#d1',
data:{
name:'max'
}
})
</script>
</html>
2.1 插值语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<p>姓名:{{name}}</p> <!--变量名可以正常插入-->
<p>年龄:{{age}}</p>
<p>爱好:{{hobby}},第一个爱好:{{hobby[0]}}</p> <!--数组(就是python中的列表)，支持索引，索引从0开始-->
<p>好朋友:{{friends}},好朋友的年龄:{{friends.age}}</p> <!--对象(也就是python中的字典)-->
<p>标签:{{a_url}}</p> <!--标签在页面上还是显示标签，因为如果是标签的话可以进行xss攻击,-->
<p>运算:{{2*3+4*5}}</p> <!--运算可以正常显示-->
<p>三目运算符:{{10>9?'成立':'不成立'}}</p> <!--三目运算符可以正常显示-->
</div>
</body>
<script>
var vm = new Vue({
el: '#d1',
data: {
name: 'max',
age: 26,
hobby: ['唱', '跳', 'rap', '篮球'],
friends: {name: 'jerry', age: 25},
a_url:'<a href="www.baidu.com">点我有惊喜</a>'
}
})
</script>
</html>
<!--
SS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。
-->
<!--
插值语法只能将变量名放在标签中间，不能放在标签内部，放在内部无法渲染。例如:
<div id="d1">
<p>姓名:{{name}}</p>
</div>
<div id="d1">
<p {{name}}></p>
</div>
无法显示
-->
3.文本指令
3.1 v-text
1.指令系统:
v-xx:写在标签内部，可以是任意标签
v-xx="":原来插值语法中能写的，都可以写，只是不需要写在{{}}中
v-text直接把字符串内容渲染在标签内部，字符串必须是在data中声明过的，等同于
<p v-text="a_url"></p>
<p>{{a_url}}</p>
2.代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<p v-text="url"></p>
<!--相当于<p>{{a_url}}</p>-->
</div>
</body>
<script>
var vm = new Vue({
el: '#d1',
data: {
name: 'max',
url:'<a href="www.baidu.com"></a>'
}
})
</script>
</html>
3.<p v-text="url"></p>在页面上真实渲染的样子:
<p><a href="https://www.cnblogs.com/zkz0206/">点我有惊喜</a></p>
页面会按照转义字符将a标签的<>转成相应的字符，但是在页面上可以正常显示，所以v-text不能正常渲染a标签。
3.2 v-html
1.v-html可以将字符串内容渲染在标签内部:<p v-html="a_url"></p>
2.代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<p v-html="url"></p>
</div>
</body>
<script>
var vm = new Vue({
el: '#d1',
data: {
name: 'max',
url:'<a href="https://www.cnblogs.com/zkz0206/">点我有惊喜</a>'
}
})
</script>
</html>
3.v-html在页面渲染标签正常的样子:
<p><a href="https://www.cnblogs.com/zkz0206/">点我有惊喜</a></p>
它不会把标签的<>按照转义字符转化，所以可以正常渲染标签。
3.3 v-show
1.v-show指定的变量名在data中指定一个布尔值(true或者false)，当指定true是在页面上可以正常显示被v-show修饰的标签，指定false相反。
2.代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<h2>v-text</h2>
<p v-text="url"></p>
<h2>v-html</h2>
<p v-html="url"></p>
<h2>v-show</h2>
<div style="background-color: blue;width: 400px;height: 400px" v-show="show"></div>
</div>
</body>
<script>
var vm = new Vue({
el: '#d1',
data: {
name: 'max',
url:'<a href="https://www.cnblogs.com/zkz0206/">点我有惊喜</a>',
show:true
}
})
</script>
</html>
也可以直接在前端console窗口修改show的值，改变标签是否存在。修改之后标签隐藏是因为设置了标签的属性:display:none来调整标签的存在与否。
3.4 v-if
1.v-if指定的变量名在data中指定一个布尔值(true或者false)，同样当指定true是在页面上可以正常显示被v-if修饰的标签，指定false相反。但是当在前端console窗口中修改完show_if的值时，被v-if修饰的标签直接不存在了，v-if是通过直接清除掉标签的形式来让标签不显示。
2.代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<h2>v-text</h2>
<p v-text="url"></p>
<h2>v-html</h2>
<p v-html="url"></p>
<h2>v-show</h2>
<div style="background-color: blue;width: 400px;height: 400px" v-show="show"></div>
<h2>v-if</h2>
<div style="background-color: darkred;width: 400px;height: 400px" v-if="show_if"></div>
</div>
</body>
<script>
var vm = new Vue({
el: '#d1',
data: {
name: 'max',
url:'<a href="https://www.cnblogs.com/zkz0206/">点我有惊喜</a>',
show:true,
show_if:true
}
})
</script>
</html>
4.属性指令
1.标签上的属性可以绑定变量，以后变量变化，属性值也跟着变化:href、src、name、class、style、height。
2.语法结构:v-bind:属性名="变量名"，可以简写为 :属性名="变量名"。
3.我们可以通过如下方式来修改a标签指向的地址:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
<a v-bind:href="url">点我有惊喜</a>
</div>
</body>
<script>
var vm = new Vue({
el: '#d1',
data: {
url:'https://www.cnblogs.com/zkz0206/'
}
})
</script>
</html>
现在当我们点击页面上的字样'点我有惊喜'，就可以跳到博客园页面上。当时当我们在console窗口修改url之后，我们再点击字样'点我有惊喜'就会跳到刚才设置的页面:
4.v标签还可以指定图片的大小:当我们用v-bind指定时，图片的大小不能写成具体的数值，而应该在data中定义好变量名和数值的对应关系，在v-bind中用变量名指代数值:
<body>
<p><img src="https://img1.baidu.com/it/u=1411464141,1268552895&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" v-bind:height="h" v-bind:width="w"></p>
</body>
<script>
var vm = new Vue({
el: '#d1',
data: {
url:'https://www.cnblogs.com/zkz0206/',
h:'200px',
w:'200px'
}
})
</script>
用v-bind指定图片的属性可以简写(省略掉v-bind,保留冒号和后面的内容):
<p><img src="https://img1.baidu.com/it/u=1411464141,1268552895&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" :height="h" :width="w"></p>
当然也可以直接不用v-bind来指定:
<p><img src="https://img1.baidu.com/it/u=1411464141,1268552895&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" width="200px" height="200px"></p>
5.事件指令
1.事件指令是点击事件、双击事件、滑动事件等，用的最多的是点击事件click。
2.语法结构:函数必须写在methods里面，可以写函数的简写形式:函数名(){},如果函数再套函数，this指向会有问题，需要在第二层函数外定义:_this=this。
<body>
<button v-on:click="clickFunc">点击</button>
</body>
<script>
var vm = new Vue({
el: '#d1',
data: {
url:'https://www.cnblogs.com/zkz0206/',
h:'200px',
w:'200px'
},
methods:{
'clickFunc':function () {
console.log(this)
alert('弹出美女')
}
}
})
</script>
点击按钮可以发现显示了弹窗，并且打印了this，只有一层函数的情况下this就是vm实例。这样我们也可以通过点的方式来修改其中的属性。
3.现在我们的需求是:我们在页面上设置一个按钮，以及一张照片，当我们点击该按钮时图片消失，再点击图片还原:
<body>
<div id="d1">
<button v-on:click="clickFunc">点击</button>
<!--点击该按钮就会触发函数clickFunc的执行-->
<p><img src="https://img1.baidu.com/it/u=1411464141,1268552895&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" :height="h" :width="w" v-show="show"></p>
</div>
</body>
<script>
var vm = new Vue({
el: '#d1',
data: {
h:'200px',
w:'200px',
show:true
},
methods:{
'clickFunc':function () {
this.show=!this.show // 定义了最初的show是true,！代表取反，相当于python中的not， 这时show指代的布尔值是false，所以图片可以在有和无之间来回切换
}
}
})
</script>
<!--不断点击按钮可以发现图片的style中的display属性在none和非none中切换，这也符合v-show的特性-->
4.现在我们的需求是:在一个列表中存放几张图片，每当点击一次按钮，随机抽取一张在页面展示，图片的大小固定。
"""
vue如何生成随机数?
Math.ceil(Math.random()*10):随机生成1-10(包含1和10)的整数
Math.floor(Math.random()*10):随机生成0-9的整数
Math.round(Math.random()*10):随机生成0-10的整数，取0和10的概率是其他数的一半
Math.floor(Math.random() * (max - min) ) + min:取[min, max)之间的随机整数
Math.floor(Math.random() * (max - min + 1) ) + min:[min, max]之间的随机整数
"""
<body>
<div id="d1">
<button @click="clickFunc">点击</button>
<p><img :src="url" alt="" :height="h" :width="w"></p>
</div>
</body>
<script>
var vm = new Vue({
el: '#d1',
data: {
h: '400px',
w: '400px',
url: 'https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg',
url_list: [
'https://img.lesmao.vip/k/1178/T/XIAOYU/951/951_001_dj7_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_001_k4r_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_004_g66_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6165/6165_001_gwy_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XIAOYU/948/948_020_xcx_3600_5400.jpg',
]
},
methods: {
'clickFunc': function () {
var i = Math.floor(Math.random() * (4 - 0 + 1)) + 0 // 生成一个随机数,此时的this就是vue实例，vue实例可以点data中的方法进行操作
this.url = this.url_list[i] // 拿到指定索引值的图片，修改好之后前端会自动渲染数据url
console.log(i, this.url)
}
}
})
</script>
5.现在需求改变:要求点击按钮之后图片每隔一秒种就随机切换一次:
<body>
<div id="d1">
<button @click="clickFunc">点击</button>
<p><img :src="url" alt="" :height="h" :width="w"></p>
</div>
</body>
<script>
var vm = new Vue({
el: '#d1',
data: {
h: '400px',
w: '400px',
url: 'https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg',
url_list: [
'https://img.lesmao.vip/k/1178/T/XIAOYU/951/951_001_dj7_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_001_k4r_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_004_g66_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6165/6165_001_gwy_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XIAOYU/948/948_020_xcx_3600_5400.jpg',
]
},
methods: {
clickFunc() {
var _this = this // _this指vue对象
// setInterval(函数名,时间):表示每隔固定该事件就执行该函数
setInterval(function() {
console.log(this) // Window {window: Window, self: Window, document: document, name: '', location: Location, …}，此时打印的this是win对象，所以我们要在内层函数外面定义一个_this
var i = Math.floor(Math.random() * (4 - 0 + 1)) + 0
_this.url = _this.url_list[i]
console.log(i)
},1000)
}
}
})
</script>
6.对象的写法:
<script>
var hobby = ['篮球','足球']
// var d = {name:'max',age:26,hobby:hobby}
var d = {name:'max',age:26,hobby}
// 以上两种写法都可以在前端页面正常展示，并且该方法不需要点击任何按钮，只要刷新就可以正常显示
console.log(d)
</script>
<script>
var hobby = ['篮球','足球']
var f = function (a, b) {
console.log('匿名函数')
console.log(a + b)
}
var d = {'name': "lqz", age: 19,f}
console.log(d)
f(1,3)
</script>
6.class和style
class和style都是属性指令
1.class:推荐使用数组
语法结构: :class='变量',变量可以是字符串，数组，对象
方式一:使用数组来装载属性(推荐)
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.font {
font-size: 60px;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.font_color {
color: blueviolet;
}
</style>
</head>
<body>
<div id="d1">
<div :class="class_list">我是div</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#d1',
data: {
class_list:['font'] // 刚开始只有font类属性
},
})
</script>
可以在前端通过push和pop的方法添加和删除类属性，更多方法参考数组的属性
方式二:使用对象来装载类属性:
<style>
.font {
font-size: 60px;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.font_color {
color: blueviolet;
}
</style>
</head>
<body>
<div id="d1">
<div :class="class_obj">我是div</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#d1',
data: {
class_obj:{font:true,blue:false,font_color:false}
},
})
</script>
在前端可以通过对象名.属性=true来设置属性是否适用
2.style:推荐使用列表
方式一:
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="d1">
<div :style="style_str">我是div</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#d1',
data: {
style_str:'color:green;font-size:200px'
},
})
</script>
可以在前端修改，写法和后端写法相同:vm.style_str='font-size:100px;color:red'
方式二:通过列表来写:
<body>
<div id="d1">
<div :style="style_list">我是div</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#d1',
data: {
style_list:[{color:'green'},{fontSize:'150px'}]
},
})
</script>
在前端修改:先通过列表索引的方式拿到对象，在通过对象点的方式修改
方式三:
<body>
<div id="d1">
<div :style="style_obj">我是div</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#d1',
data: {
style_obj:{color:'red',fontSize:'100px'}
},
})
</script>
</html>
在前端可以通过点的方式拿到:
"""
由于font-size中间带一个-在前端不能直接点来修改，所以直接改成驼峰形式写法:fontSize
"""
7.条件渲染
1.语法结构:
v-if
v-else-if(可有可无)
v-else
2.代码:
<body>
<div id="d1">
<h1>v-if</h1>
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=80&&score<90">优秀</div>
<div v-else-if="score>=60&&score<80">良好</div>
<div v-else>挂科</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#d1',
data:{
score:98
},
})
</script>
8.列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="d1">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>显示购物车</h1>
<button @click="handClick" class="btn btn-success">显示</button>
</div>
<div v-if="show">
<table class="table">
<thead>
<tr>
<th>id</th>
<th>商品名</th>
<th>商品价格</th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list"> // item是变量名可以随意更换
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#d1',
data:{
show:false,
good_list:[
{id:1,name:'钢笔',price:'88'},
{id:2,name:'铅笔',price:'22'},
{id:3,name:'文具盒',price:'77'},
{id:3,name:'书包',price:'200'},
]
},
methods:{
handClick(){
this.show =! this.show
},
}
})
</script>
</html>
标签：vue,
name,
渲染,
url,
vm,
语法,
Vue,
var,
data
From： https://www.cnblogs.com/zkz0206/p/17121060.html