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>