vue基础

前言：

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js借鉴了Angular以及React的一些核心思想，综合各自的长处进行了操作以及性能等方面的优化，进而打造出一款性能更优，学习更容易的MVVM框架。

它的作者是：尤雨溪

vue对比angular：

1、vue在设计之初参考了很多angularjs的思想
2、vue相对比与angular比较简单
3、 vue相对比与angular比较小巧，运行速度快
4、 vue与angular数据绑定都可以用｛｛｝｝
5、vue指令用v－xxx   angularjs用ng－xxx
6、vue数据放在data对象里面，angular数据绑定到$scope对象上
7、vue有组件化概念，angular没有

vue对比react：

1、vue与react都使用 virtual DOM
2、vue与react都提供了组件化的视图组件
3、 vue与react将注意力集中保持在核心库，有丰富的插件库
4、react使用jsx渲染页面，vue使用更简单的模版
5、vue比react运行速度更快

1）首先我们应该先引入Vue 

<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script> ||

<script src="js/vue.js" type="text/javascript"></script>

2）每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的Var vm=new Vue({})

    
    

     
     
    {{message}}

    
    
var app = new Vue({
    el:"#app",
    data:{
        message:"Hello vue"
    }
})Hello Vue！

el：获取执行vue的dom元素--初始化范围

data：存储数据

常用属性：

1）绑定数据

{{}}  或者  v-text=“”   只能绑定纯文本

绑定html    angular中使用ng-bin-html       vue中使用vu-html

表达式在{{}}中  +-*/   三木运算都可以使用

2）绑定事件

v-on：click=“”    或者   @click=“”

3）其他指令

v-for = " item in list" 循环   item循环到的数组值

v-for = "(item,key)  in  list"  key循环到的下标index

v-model = " "   表单元素value不能直接{{}}获取，需要在vue初始化设置一下

4）绑定属性

v-bin:id = "data内的属性值"    或者:id = "data内的属性值"   两种方法

(src   title  class   name等属性写法一样)

5）计算属性

放在computed:{//函数}  效率高   methods设置效率低

1.在模板中表达式非常便利，但是他们实际上终于简单的操作

2.模板是为了藐视试图的结构，，在模板中放入太多的逻辑会让模板过重且难以维护，这就是为什么vue.js将绑定表达式限制为一个表达式，如果需要多余一个表达式的逻辑，应当使用计算属性

3.在vue.js中，你可以通过computed选项定义计算属性

监听：

第一种写法

vm.$watch(“”，function ( newvalue，oldvalue) { } )

第二种写法    直接在vue初始化中通过

watch { msg：function (newvalue.oldvalue) { } }

类名设置：

1）v-bind：class=“{ ' class-a ' : isa，'class-b'：isb }”

lsa  isb 值为true  添加相应类名

为false 不添加类名

2）对象形式设置

<div：class=' classobj '></div>