前端-Vue

Vue

Vue是一个JS的框架，使用MVVM的思想，可以简化JS的开发

引入vue

vue.js文件拷贝到js目录

<script src="js/vue.js"></script>

创建vue对象

- el:  用来指定哪儿些标签受 Vue 管理。受管理的标签的id属性值

- data: 用来定义数据模型

- methods: 用来定义函数。

html区域编写视图，{{}}是插值表达式

双向绑定

当视图发生改变会影响数据模型，数据模型发生改变，也会影响视图

双向绑定的作用

获取表单的数据的值，然后提交给服务器

Vue的常见指令

v-model

在表单元素上双向绑定

v-bind

给HTML标签中的属性值绑定数据模型,设置  href , css样式

<a v-bind:href="url">链接1</a>//原型

<a :href="url">链接2</a>//化简

v-on

绑定事件

<input v-on:click="handle()">//原型

<input @click="handle()">//化简

methods: {
        handle: function(){
           alert("你点我了一下...");
        }
}

条件

v-if

        判定为true时渲染,否则不渲染

v-else

v-else-if

v-show

全部渲染,按条件展示某元素，在于切换的是display属性的值

v-for

遍历容器的元素或者对象的属性

格式

第一种<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>

第二种<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>

生命周期

vue对象从创建到销毁的过程

8个阶段

1. beforeCreate创建前
2. created创建后
3. beforeMount挂载前
4. mounted挂载完成

   编写mounted声明周期的钩子函数，与methods同级

   mounted () {
   }

5. beforeUpdate更新前
6. updated更新后
7. beforeDestroy销毁前
8. destroyed销毁后

查看更多作品

了解更多知识请查看Vue官网