vue基础1
Posted lsl1230
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue基础1相关的知识，希望对你有一定的参考价值。
vue是在js基础上进行了优化；vue已经将操作页面的方法都封装好，我们只需要对数据进行修改就可以完成页面的显示。vue的核心思想是只要改变数据，页面就发生变化
基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--模板语言,两个大括号，展示data中msg数据-->
{{msg}}
</div>
<script src="vue.js"></script> <!--引用js-->
<script>
//最基础实例用法
var vm=new Vue({
//通过一个元素获取到要操作的div,然后再div下进行一系列的操作
el:‘#app‘,
//数据源
data:{
msg:‘hello‘
},
//方法,多个方法之间用,分开
methods:{
change(){}
}
})
</script>
</body>
</html>
绑定事件
<body>
<div id="app">
<span>{{msg}}</span>
<input type="button" @click="change" value="修改">
//使用@click绑定事件，当数据值发生变更后，将其产生的影响
</div>
<script src="vue.js"></script> <!--引用js-->
<script>
//最基础实例用法
var vm=new Vue({
el:‘#app‘,
data:{
msg:‘hello‘
},
methods:{
change(){
this.msg=‘msg修改‘
}
}
})
</script>
</body>
绑定属性
<a href="{{url}}">跳转到百度地址</a>
// 完整写法
<a v-bind:href="url">跳转到百度地址</a>
// 缩写
<a :href="url">跳转到百度地址</a>
三元运算
<div id="app">
<div>{{flag?‘男生‘:‘女生‘}}</div> <!--三元运算，如果为true显示男生，false为女生-->
<input type="button" @click="change" value="修改">
</div>
v-if、v-else-if、v-else（条件渲染）
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true 值的时候被渲染
<span v-if="phoneNumber==10086">
中国移动
</span>
<span v-else-if="phoneNumber==10010">
中国联通
</span>
<span v-else>
中国电信
</span>
v-show（条件渲染）
根据条件渲染的另一种写法，它独立自己使用，和v-if的使用相同，区别在于v-if条件不成立，元素不会被创建，而v-show条件不成立只是增加了一个display:none的属性。
<span v-show="number==10086">
移动
</span>
v-for
<div id="app">
<div v-for="(item,index) in games">{{item}}-{{index}}</div> <!--循环列表-->
<div v-for="(item,key) in dict_games">{{item}}-{{key}}</div> <!--循环字典-->
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:‘#app‘,
data:{
games:[‘绝地求生‘, ‘英雄联盟‘, ‘王者荣耀‘],
dict_games:{‘name‘:‘绝地求生‘, ‘company‘:‘蓝洞‘}
}
})
</script>
双向数据绑定
以上是关于vue基础1的主要内容，如果未能解决你的问题，请参考以下文章