首页 / VUE / Vue框架基础——迈出第一步
Vue框架基础——迈出第一步
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue框架基础——迈出第一步，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6034字，纯文字阅读大概需要9分钟。
内容图文
下载Vue框架
把Vue框架当作一个包使用，下载：
https://cn.vuejs.org/v2/guide/installation.html
直接导入外网上的Vue框架
导入网址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js （开发版）
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Vue框架的基本使用
- 导入Vue框架
- 给标签添加class或者id
- 在script内写入Vue语法
var app = new一个Vue对象（{
el: '标签选择器',
data: {
key: value
}
}）
- html标签内{{ key }} jinja2语法替换value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload = function () {
var app = new Vue({
el: '.box',
data: {
content: "Hello Vue!"
}
})
}
</script>
</head>
<body>
<div class="box">
<div>{{ content }}</div>
</div>
</body>
</html>
测试
打印出value
Vue框架绑定元素的属性
避免与jinja2语法重复，可以把Vue框架替换value值的语法改一下
delimiters: 一个列表，参1为改左边的语法,参2为改右边的语法，以后替换就成为了 [[ key ]]
delimiters: ['[[', ']]']
- v-bind:属性名=“Vue框架内的key” 可以给元素的属性赋值
- 可以简写为 :属性名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload = function () {
var app = new Vue({
el: '.box',
delimiters: ['[[', ']]'],
data: {
content: "Hello Vue!",
// 给url赋值
url: 'https://www.baidu.com/',
url2: 'https://www.sogou.com/',
link_data: '百度',
link_data2: '搜狗'
}
})
}
</script>
</head>
<body>
<div class="box">
<div>[[ content ]]</div>
<a v-bind:href="url" target="_blank">[[ link_data ]]</a>
<!-- 简写给属性赋值 -->
<a :href="url2">[[ link_data2 ]]</a>
</div>
</body>
</html>
测试
事件的使用
- 添加methods 放入事件函数
- @click=“函数名” 绑定事件函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload = function () {
var app = new Vue({
el: '.box',
delimiters: ['[[', ']]'],
data: {
// 添加count变量测试点击
count: 0
},
// 添加methods 里面放入函数
methods: {
clickFunc: function () {
// this代表当前对象 app对象的count属性加等于1
this.count += 1;
}
}
})
}
</script>
</head>
<body>
<div class="box">
<!-- @事件名=“框架内函数” -->
<button @click="clickFunc">[[ count ]]</button>
</div>
</body>
</html>
测试
点击数字+1
if判断和for循环
if判断
- v-if= “条件语句” 判断如果为true就显示元素
- v-else-if= “条件语句”
- v-else
- v-show=“布尔值” 为true的话显示元素 为false 元素的属性display: none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload = function () {
var app = new Vue({
el: '.box',
delimiters: ['[[', ']]'],
data: {
flag: 2,
isshow: true,
}
})
}
</script>
</head>
<body>
<div class="box">
<p v-if="flag==1">vif------</p>
<p v-else-if="flag==2">velseif---abcd</p>
<p v-else-if="flag==3">velseif---1234</p>
<p v-else>else</p>
<p v-if="isshow">heheheheh</p>
<p v-show="isshow">hahahaha</p>
</div>
</body>
</html>
测试
for循环
- v-for="
循环语句变量 in 数组"…[[ 变量 ]]… - (item,index) in 数组
index为下标 item为数组内值 - item in 字典
只遍历字典的value - （obj,key）in 字典
obj为属性值，key为属性名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload = function () {
var app = new Vue({
el: '.box',
delimiters: ['[[', ']]'],
data: {
// 数组
itemList: [5, 4, 3, 2, 1],
indexList: ['a','b','c','d','e'],
// 字典
objData: {
name:'小明',
age:19
},
// 数组包含字典
objList:[
{
name:'小明',
age:20
},
{
name:'小红',
age:21
}
]
}
})
}
</script>
</head>
<body>
<div class="box">
<ul>
<li v-for="item in itemList">[[ item ]]</li>
<li v-for="(item,index) in indexList">角标[[ index ]]==数值[[ item ]]</li>
<li v-for="item in objData">[[ item ]]</li>
<li v-for="(obj,key) in objData">属性值[[ obj ]]------属性名[[ key ]]</li>
<li v-for="obj in objList">属性值1:[[ obj.name ]]------属性值2:[[ obj.age ]]</li>
</ul>
</div>
</body>
</html>
测试
焦点失去事件@blur和获取表单数据
- 获取表单数据时要让表单中标签的
v-model=变量 - 然后在框架中用
变量: ""就可以获取到 - 获取复选框时要
变量:[]否则获取的值就会是布尔值 - @blur失去鼠标焦点是触发checkusername函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload = function () {
var app = new Vue({
//定义变量el和data
el: '.box',
data: {
// 获取html中v-model等于username的value
username: "",
password1: "",
password2: "",
sex: "",
// 复选框要使用列表，否则会返回true或者false
like: [],
city: "",
desc: "",
},
methods: {
register: function () {
alert(this.username + this.password1 + this.password2 + this.sex + this.like + this.city + this.desc)
},
checkusername: function () {
alert(this.username)
}
}
})
}
</script>
</head>
<body>
<div class="box">
<div class="box">
<table border="1">
<tr>
<td>用 户 名</td>
<!-- @blur失去鼠标焦点是触发checkusername函数 -->
<td><input type="text" v-model="username" @blur="checkusername"></td>
<td>{{username}}</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" v-model="password1"></td>
<td>{{password1}}</td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" v-model="password2"></td>
<td>{{password2}}</td>
</tr>
<tr>
<td>性别</td>
<td>
男<input type="radio" name="sex" value="boy" v-model="sex">
女 <input type="radio" name="sex" value="girl" v-model="sex"></td>
<td>{{sex}}</td>
</tr>
<tr>
<td>爱好</td>
<td>
足球 <input type="checkbox" name="like" value="足球" v-model="like">
篮球 <input type="checkbox" name="like" value="篮球" v-model="like">
兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like">
</td>
<td>{{like}}</td>
</tr>
<tr>
<td>所在城市</td>
<td>
<select name="city" v-model="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</td>
<td>{{city}}</td>
</tr>
<tr>
<td>个人简介</td>
<td><textarea name="desc" v-model="desc"></textarea></td>
<td>{{desc}}</td>
</tr>
</table>
<button @click="register">注册</button>
</div>
</div>
</body>
</html>
内容总结
以上是互联网集市为您收集整理的Vue框架基础——迈出第一步全部内容，希望文章能够帮你解决Vue框架基础——迈出第一步所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】