一、VueJs介绍
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM， 也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性；
二、入门案例
使用vue先引入vuejs-2.5.16.js的包；
1.插值表达式
(双大括号) 的文本插值
<body> <div id="app"> {{message}} <!--Vue的插值表达式，把data中定义的数据显示到此处--> <!--三元运算符--> {{false ? "ok" : "false"}} <!--数字运算--> {{number+520}} </div> </body> <script> //view model //创建Vue对象 new Vue({ el: "#app",//由vue接管的id为app区域 data: { message: "hello vue", //不加分号 number: 100 } }); </script>
2.常用系统指令
2.1.v-on
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码;
v-on 可以用 @ 代替；
2.2.v-on:click (@click)
<body> <div id="app"> {{message}} <button v-on:click="fun1('Vue')">vue的onclick</button> </div> </body> <script> //view model new Vue({ el:"#app", data:{ message:"hello word" }, methods:{ fun1(msg) { alert("hello"); this.message=msg; } } }); </script>
2.3. v-on:keydown
<body> <div id="app"> <div @mouseover="fun1" id="div"> <textarea @mouseover="fun2($event)">这是一个文件域</textarea> </div> </div> </body> <script> new Vue({ el:"#app", methods:{ fun1:function () { alert("鼠标到了div上"); }, fun2:function (event) { alert("鼠标移到textarea上") //停止事件 传播 event.stopPropagation(); } } }); </script>
2.4.v-mouseover(鼠标移动事件)
<body> <div id="app"> <!--keydown:键盘按下事件--> Vue:<input type="text" v-on:keydown="fun($event)"> </div> </body> <script> //view model new Vue({ el: "#app", methods: { /*$event 是vue中的事件对象和传统js中的event对象一样*/ fun(event) { var keyCode = event.keyCode; if (keyCode > 105 || keyCode < 96) { //不让键盘的案件起作用 event.preventDefault(); } } } }); </script>
2.5. @submit.prevent : 禁止访问
@mouseover.stop : 禁止行为传播
<body> <div id="app"> <form action="http://www.itheima.com" method="post" @submit.prevent> <input type="submit" value="提交"> </form> <hr/> <div @mouseover="fun1" id="div"> <textarea @mouseover.stop="fun2($event)">这是一个文本域</textarea> </div> </div> </body> <script> //view model new Vue({ el:"#app", methods:{ fun1:function () { alert("鼠标到了div上"); }, fun2:function (event) { alert("鼠标移到textarea上"); } } }); </script>
2.6. v-text 与 v-html
<body> <div id="app"> <!--当作文本显示，不会解析html--> <div v-text="message"></div> <!--解析html,显示内容--> <div v-html="message"></div> </div> </body> <script> //view model new Vue({ el:"#app", data:{ message:"<h1>hello<h1>" } }) </script>
2.7.v-bind
注意：插值表达式不能用于html标签的属性取值，要给html的属性标签设置值，需要使用v-bind
<body> <div id="app"> <font size="5" v-bind:color="ys1">aaaaaaa</font> <font size="5" :color="ys2">bbbbbbb</font> </div> </body> <script> //view model // 插值表达式不能用于标签属性内部 //v-bind简写为 : new Vue({ el:"#app", data:{ ys1:"red", ys2:"green" } }) </script>
2.8. 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/> <button @click="fun">点击</button> </form> </div> </body> <script> new Vue({ el:"#app", data:{ user:{ username:"zhangsan", password:"123" } }, methods:{ fun(){ alert(this.user.username); } } }) </script>
2.9. v-for
<body> <div id="app"> <ul> <!--key: 属性；value：值；index：索引 :key="index ： 加上这个可以提高效率 --> <li v-for="(key,value,index) in product" :key="index">{{index+1}}.{{key}}--->{{value}}</li> </ul> </div> </body> <script> //view model new Vue({ el:"#app", data:{ product:{ id:1, name:"笔记本", perice:5000 } } }) </script>
2.10.v-if 和 v-show
<body> <div id="app"> <span v-if="flag">aaaaa</span> <span v-show="!flag">bbbbb</span> <button @click="toggle">切换</button>
<input type="button" value="点一下" @click="random=Math.random()"/>{{random}}<br>
<span v-if="random>0.75">大于0.75</span>
<span v-else-if="random>0.5">大于0.5</span>
<span v-else-if="random>0.25">大于0.25</span>
<span v-else>大于0</span>
</div> </body> <script> //view model new Vue({ el:"#app", data:{ flag:false }, methods:{ toggle:function () { this.flag=!this.flag; } } }) </script>