Vue
1.什么是Vue?
Vue是一款渐进式前端框架基于MVVM模式,免除JS中DOM操作,简化书写和操作流程.
2.如何使用?
-
1.新建一个HTML文件,引入Vue.js文件.
-
2.创建Vue对象,定义模型数据.
-
3.将模型数据绑定到view视图中.
- <div id="app"> <!-- 插值表达式,由Vue框架解析,获取模型数据的值展示到标签内容体中 --> <p>{{message}}</p> <input type="text" v-model="message"> </div>
3.Vue指令
-
v-bind指令(给HTML标签绑定模型数据)
{{}}插值表达式,由Vue框架解析,将获取的模型数据的值展示到标签内容体中
v-bind:属性="模型数据"或者:属性="模型数据"
<body> <script src="js/vue.js"></script> <div id="app"> <!-- v-bind:给属性绑定模型数据，语法如下: v-bind:属性名="模型数据"，v-bind可以省略不写，即(:属性名="模型数据") --> <a v-bind:href="url" >链接1</a> <a :href="url" >链接2</a> <!-- v-model:给表单项绑定模型数据，属于双向数据绑定。语法如下： v-model="模型数据" --> <input type="text" v-model="url" > </div> </body> <script> //定义Vue对象 new Vue({ el:"#app", //vue接管的区域 data:{ url:"http:www.itheima.com" } }) </script>-
v-on指令(绑定事件)
绑定的函数必须在Vue对象的methods属性中
v-on:事件名称="函数名()"或者@事件名称="函数名称"
<body> <div id="app"> <!-- v-on：绑定事件，语法如下： v-on:事件名称="函数名()"，还可以简写成 @事件名称="函数名()" 注意：绑定的函数必须定义到vue的methods属性中，否则找不到方法。 --> <input type="button" value="点我一下" v-on:click="handle" > <input type="button" value="点我一下" @click="handle"></div> </body> <script> //定义Vue对象 new Vue({ el:"#app", //vue接管的区域 data:{ }, methods: { handle:function(){ console.log("我被点了"); } }, }) </script>
-
v-if(加载或不加载当前标签)和v-show(显示或隐藏当前标签)
v-if="条件表达式":条件为true就加载当前标签
v-else-if="条件表达式":条件为true就加载当前标签
v-else以上条件都不执行时立即执行
v-show="条件表达式"条件为true时显示当前标签,否则隐藏
<body> <div id="app"> <!-- v-if="条件表达式"：条件表达式为true就加载当前标签 v-else-if="条件表达式"：条件表达式为true就加载当前标签 v-else：以上条件都不成立时执行v-else --> 年龄<input type="text" v-model="age">经判定，为: <span v-if="age<=35">年轻人(35及以下)</span> <span v-else-if="age<=60">中年人(35-60)</span> <span v-else>老年人(60及以上)</span><br><br>
<!-- v-show="条件表达式"：条件表达式为true就显示此标签，否则隐藏标签，通过样式控制。 --> 年龄<input type="text" v-model="age">经判定，为: <span v-show="age<=35" >年轻人(35及以下)</span> <span v-show="35<age&&age<=60">中年人(35-60)</span> <span v-show="age>60">老年人(60及以上)</span>
</div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管的区域 data: { age: 20 } }) </script>
-
v-for(遍历容器或者对象)
-
v-for ="变量1 in 数组"或者(变量1,变量2) in 数组 (变量1为元素值,变量2为索引)
4.Vue生命周期
生命周期又称钩子函数,共有八个(创建前,创建后,搭载前,搭载后,更新前,更新后,销毁前,销毁后)
mointed():挂载完成,Vue初始化完成,HTML页面渲染成功.
作用:发送请求到服务端,加载数据
标签：el,Vue,标签,app,60,new From： https://www.cnblogs.com/zlsame/p/17270104.html