1.对Vue的初步认识

Vue是一种用于构建用户界面的渐进式JavaScript框架（其他框架还有ANGULAR、REACT等），它能够帮助开发者创建可维护性和可测试性更强的代码库。“渐进式”的意思是指，若你已有一个现成的服务端应用，那么你可将vue作为该应用的一部分嵌入其中，带来更加丰的交互体验；或者如果你希望将更多业务逻辑放到前端来实现，那么vue的核心库及其生态系统也可满足你的各式需求。和其他前端框架一样，vue允许你将一个网页分割成可服用的组件，每个组件都包含属于自己的html、css、JavaScript以用来渲染网页中相应的地方。

1.1 Vue的安装参见以下链接

https://blog.csdn.net/m0_37479246/article/details/78836686

2.HTML、CSS、JavaScript三者之间的关系

html是框架，相当于房子的顶梁柱；css是刷墙的颜料，负责美化html；JavaScript是让html更生动好看，如让网页中的图片滚动显示。另外，平时常说的Dreamwea是一种编辑网页的工具。div和frame是html众多元素中的两个，前者负责布局，后者负责整体框架。

3.每个vue应用都需通过实例化vue来实现。语法格式如下：

 var vm = new Vue({  
        //选项  
        })

4.DOM

全称document object model，文档对象模型，是用于访问html元素的正式W3C标准。

5.vue对象包含的属性：

    new Vue({  
        //绑定元素  
        el:'#app',  
        //要绑定的数据  
        data:{},  
        //用来接受外部资料的属性  
        props:{},  
        // 用来定义在Vue内使用的方法  
        methods:{},  
        //用来观察Vue 数据的更新  
        watch:{},  
        //自动为内部数据计算的属性  
        computed:{},  
        // 提供Vue 实体编译后的样板  
        template:{},  
        //用来定义子元件  
        components:{}  
    });

6.一个测试实例




    
    
    Document
     



     
        
            {{msg}}
        
    

    



jsdfdfjasjf

该实例的运行结果是在浏览器页面显示“你好！”，并且当鼠标指针指向该文本时，显示页面加载时间。

7.Vue.js模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
(1)文本：使用{{...}}进行数据绑定，文本插值就属于这种形式


  {{ message }}

(2)html：使用v-html指令输出html代码

html属性的值：使用v-bind指令绑定html属性中的值。下面的实例先判断class1的值，若为true则使用class1类的样式，否则不使用该类：


  修改颜色
  


  
    v-bind:class 指令

(3)Vue支持JS表达式


    {{5+5}}

    {{ ok ? 'YES' : 'NO' }}

    {{ message.split('').reverse().join('') }}
    菜鸟教程

(4)指令：是带有v-前缀的特殊属性。用于在表达式的值改变时，将某些行为应用到DOM上。例：


    现在你看到我了

这里，v-if指令将根据表达式seen的值（true或false)来决定是否插入p元素。
(5)参数：在指令后以冒号指明。如下例中，v-bind指令被用来响应地更新HTML属性：


    菜鸟教程

这里，href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。
下面这个例子中的v-on指令，用于监听DOM事件：

在这里，参数是监听的事件名。
(6)修饰符 ：以英文句号.指明的特殊后缀，用于指出一个指令应该以特殊的方式绑定。如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault();

(7)用户输入：在input输入框中可使用v-model指令来实现双向数据绑定，如下例：


    {{ message }}

v-model指令用来在input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定元素的值。
按钮的事件我们可用v-on指令监听，并对用户的输入进行绑定。下面的实例在用户点击按钮后对字符串进行反转操作：


    {{ message }}

(8)常用缩写：Vue为两个最常用的指令v-bind、v-on提供了特别的缩写

Vue.js基础