vue的基本语法
1.vue基本介绍
Vue是一个MVVM的渐进式前端框架。
包括:
- 声明式渲染 Declarative Rendering
- 组件系统 Components
- 客户端路由 Vue-router
- 大规模状态管理 Vuex
- 构建工具 Webpack/Vue-cli
- 服务端通信 Axios
2.vue的基础语法介绍
（1）基本语法
Vue是一个MVVM的渐进式前端框架。
包括:
- 声明式渲染 Declarative Rendering
- 组件系统 Components
- 客户端路由 Vue-router
- 大规模状态管理 Vuex
- 构建工具 Webpack/Vue-cli
- 服务端通信 Axios
作者：陌未央
链接：https://www.imooc.com/article/details/id/22221
来源：慕课网
Vue是一个MVVM的渐进式前端框架。
包括:
- 声明式渲染 Declarative Rendering
- 组件系统 Components
- 客户端路由 Vue-router
- 大规模状态管理 Vuex
- 构建工具 Webpack/Vue-cli
- 服务端通信 Axios
作者：陌未央
链接：https://www.imooc.com/article/details/id/22221
来源：慕课网
<body>
<div id="app">
{{message}}<!--Vue的插值表达式，把data中定义的数据显示到此处-->
<!-- 三元运算符 -->
{{ false ? "OK" : "No" }}
<!-- 数学运算-->
{{number*3.14}}
<!--插值表达式不支持
{{var a = 1;}}
{{if(a = 10){}}}
-->
</div>
</body>
<script>
//view model
//创建Vue对象
new Vue({
el:"#app",//由vue接管id为app区域
data:{
message:"Hello Vue! EESY",//注意：此处不要加分号
number:100
}
});
</script>
（2）v-model语法
v-model:主要是在表单元素的双向数据绑定中使用。比如文本框、下拉框、单选、复选、textarea等等。因为v-model是双向绑定的，所以文本框输入以后，模型也会发生改变。反之模型改变了文本框也会改变。
<body>
<div id="app">
<form action="" method="post">
用户名：<input type="text" name="username" v-model="user.username"><br/>
密码：<input type="text" name="password" v-model="user.password"><br/>
</form>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"test",
password:"1234"
}
}
})
</script>
（3）v-show与v-if语法
v-show：控制显示隐藏。使用v-show的情况下，dom是存在的。v-show通过指定CSS样式给元素添加display block或者display none进行控制。
<body>
<div id="app">
<span v-if="flag">wkIT</span>
<span v-show="flag">itcast</span>
<button @click="toggle">切换</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
flag:false
},
methods:{
toggle:function(){
this.flag = !this.flag;
}
}
})
</script>
（4）v-text与v-html语法
v-text：主要用于文本的渲染。和{{}}功能一样。但是{{}}在第一次页面Vue木有初始化完成时，会显示{{}}字符。故文本渲染多用v-text。
v-htnl：主要用于文本与标签渲染。v-html可以进行标签的解析，并且把解析到的html标签渲染到页面中。
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
<!--<div id="div1"></div>
<div id="div2"></div>-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"<h1>Hello Vue</h1>"
}
});
//传统js的innerText和innerHTML
window.onload = function(){
document.getElementById("div1").innerHTML="<h1>Hello</h1>";
document.getElementById("div2").innerText="<h1>Hello</h1>";
}
</script>
（5）v-bind的俩种语法
v-bind：绑定属性。给一个dom元素添加属性。
<body>
<div id="app">
<font size="5" v-bind:color="ys1">第一种不同写法</font>
<font size="5" :color="ys2">第二种不同写法</font>
</div>
</body>
<script>
//view model
//插值表达式不能用于html标签的属性取值
//要想给html标签的属性设置变量的值，需要使用v-bind
//v-bind也可以简化写法 直接使用:
new Vue({
el:"#app",
data:{
ys1:"red",
ys2:"green"
}
})
</script>
（6）v-on语法
v-on：事件绑定。(v-on:同等于@)
<body>
<div id="app">
{{message}}
<button v-on:click="fun1('Vue v-on')">vue的onclick</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"Hello Vue!"
},
methods:{
fun1:function(msg){
alert("Hello");
this.message = msg;
}
}
});
</script>
(7) v-for语法
v-for：循环。主要用于表格<li> 标签，去循环一个数组。
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr ">{{item}}={{index}} </li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5]
}
})
</script>
浙公网安备 33010602011771号