vue （一）

1.vue是渐进式js框架

vue（核心）+vueX+elementUi+axios+vueRouter 全家桶

react也是渐进式框架；

1）引入文件

类似于jquery的那一串文件

公司里是用服务器方式去使用，而不是引用文件；

2）vue的语法

mvc: model view controller

在vue中数据和视图是分离的，

dom操作非常耗费性能，之前需要进行大量的dom操作；

vue和react 都在追求最小化dom操作；

**“数据推动视图”

之后只关注怎么改数据；
mvvm模式： model view viewmodel;

msg

(msg是变量)
所以用vue语法，可以在html中直接写变量；

** vue的逻辑就是去：改数据，不用去看界面；

vue的基础语法：

1）创建vue实例

{{message}}

————{{}} vue语法，提供js环境，可以写js语法，可以提供表达式，不能是语句（变量声明，函数声明，if else等；）；这种可以把js直接渲染到页面中；message是一个变量，具体在下面data中去具体给数据

**两个要点：
1）一定在el中挂起来，绑定html中的标签；
2）在html中用{{}}操作，可以是表达式，并不是语句；

** innerText 和的 innnerHtml在原生中的问题，在这里也存在；
**双大括号会将数据解析为普通文本；

如何往页面中插入html？

指令：是指带有v-前缀的特殊属性；（指令后面都是按js执行）
v-html：往元素里插入html；

举例：

跳转

3）怎么操作元素的属性（style， value等）？

新指令：v-bind ，用于动态的绑定元素属性（id class style href src等），可以简写为： （冒号）

举例： v-bind:class=“name”; （这个是添加在div标签中的），然后在下面的data中具体写name
举例2: v-bind:href=“url”，然后在下面的data中具体写url地址

** v-bind 关于class和style的特殊用法；
**class直接绑定一个对象，对象的属性值是一个布尔值；用来标明那个class是否存在；

例如：

，这里面isActive是变量名，在下面data中用true和false去表示,true的话就是这个class名字存在；

***绑定的数据对象不必内联定义在模板里：

data: { classObject: { active: true, 'text-danger': false } }

**直接绑定一个数组；数组里面的变量存储着真实的class名字，具体还得从data里面去找

——数组中存的只是变量

data{
activeClass：“box”
errorClass；“error”
}

（二） style ：内联样式；

v-bind：style

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

data: { activeColor: 'red', fontSize: 30 } 直接绑定到一个样式对象通常更好，这会让模板更清晰：

data: { styleObject: { color: 'red', fontSize: '13px' } }

数组：

data: {
baseStyles: {
color: ‘red’,
fontSize: ‘13px’
width:‘10px’
height:‘100px’
}
overridingStyles: {

width:'12px'
height:'120px'

}
}

***两种样式会重叠：

---

显示与隐藏：

v-show :绑定布尔值，显示与隐藏；元素存在，切换样式
v-if：绑定布尔值，显示与隐藏；元素是否渲染；else-if,else-if,else 都可以跟，用于多重的条件判断，他们之间必须是互斥的；

举例：

=========================

v-text ：没啥用，等效于{{}}, 就是往里面插入内容；

v-model: 双向绑定，（只针对表单元素）

原来是数据驱动视图（界面），但是v-model可以双向绑定；

**这里只针对表单元素，因为可以通过界面去改数据；

** v-model 有一些修饰符；
v-model.number（转成数据类型）
v-model.trim（去首尾空格的）

举例：

**单个复选框是绑定布尔值；
多个复选框是绑定数组；
单选框直接绑定到值；
下拉选择框只能绑定到值；

========================================

v-on：绑定事件
可以缩写为： @click 代替v-on：
事件修饰符：.stop / .prevent (阻止冒泡)

举例：

点我

** data 存所有数据，methods是所有方法；

** 如果在自己的方法中调用自己的数据，那么一定是：this.value

**** es6 中，如果属性值是变量；并且这个变量名跟属性名一样的话，那么属性名和属性值可以简写成一个“：” （冒号）

**对象里函数也能缩写；可以把冒号和function一起省略；

================================

computed：计算属性 （不是指令）；把所有需要计算的放在这里面；（适用于各种表达式）

与methos区别：methods是调用函数才执行， 但是computed是值发生变化时才执行；

watch是一个监听器：监测数据；如果能用computed和methods解决的，就不用watch；

===========================