前端——Vue基础语法

Vue介绍

• Vue是一套构建用户界面的渐进式前端框架。

• 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。

• 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。

• 特点 易用：在有HTMLCSSJavaScript的基础上，快速上手。 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

Vue的使用

1. 下载和引入vue.js文件。

2. 编写入门程序。 视图：负责页面渲染，主要由HTML+CSS构成。 脚本：负责业务数据模型（Model）以及数据的处理逻辑。

    
    
    


    
    

        {{msg}}
    

• Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。

   let vm = new Vue({
    选项列表;
   });

• 选项列表 el选项：用于接收获取到页面中的元素。(根据常用选择器获取)。 data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。 methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象。

• 数据绑定 在视图部分获取脚本部分的数据。 {{变量名}}

Vue指令

 v-html:解析文本数据，也可以解析标签

v-bind绑定属性以及关于绑定css样式操作

    
    
    
    


    

        百度一下
        

        百度一下
        

        
我是div
    

v-for 既可以遍历容器，也可以遍历对象，使用增强for循环的格式

    
    
    
    
    


    

        

            {{name}}
        
        

            {{value}}
        
    



    

v-on:click和@click一样，演示代码如下

    
    
    
    
    


    
{{name}}
    改变div内容
    双击改变div内容
    改变div内容



    

 v-model在表单元素上创建双向数据绑定

Vue模板&组件

Vue生命周期