标签：语法 vue 变量 ... 样式学习 VUE 随笔 class

VUE

做的事儿和二阶段一样，但是语法变化较大，一切的框架都是为了简化DOM操作（语法麻烦、渲染多了影响效率）

VUE 一、vue介绍二、vue2.0的使用 1、vue2.0的使用模板：2、vue2的class和style操作样式 - vue.js在控制样式：三、vue2，3公共用法 1、vue插值表达式：2、vue指令：

一、vue介绍

渐进式JavaScript框架，易学易用，性能出色，适用场景丰富的 Web 前端框架。（难度还好，但是量大）构建数据驱动的web应用开发框架，属于前端框架。

为什么受欢迎？ 1、声明式渲染：应对前端后分离开发的大趋势 2、渐进式框架：适应各种业务需求以及场景（vue从小到大都可以胜任） 3、更适合移动端：现在的趋势也是移动端为主，SPA页面（单页面开发 - 效率更高，只有一个.html文件） 4、快速交付：结合一些第三方UI插件库/框架/组件库 - elementUI（PC端）/vantUI（移动端） 5、企业需求：必备技能（vue或react 二选一） 6、中国的框架（作者借鉴了react和angular）
vue是一个属于mvvm架构的框架，什么是mvvm？ m - model：模型数据 v - view：视图 vm - ViewModel：vm控制器我们一般统称为mv*架构：mvc、mvp、mvvp
学习目的：vue一共学习4周，呆老师教你一周vue基础，vue全家桶由三部分组成： 1、vue 2、vue router - vue路由，做项目的时候才学习 3、vuex - 状态机：在不同的页面，我们需要一个状态，来判断什么操作，比如登录了吗，类似于我们二阶段学习的webStorage
开发环境搭建： 1、下载引入vue.js（版本2.0和3.0，我们都学习）：<script src="2.0或3.0"></script> 2、脚手架方式 - 项目开发时才用，深入学习后

二、vue2.0的使用

1、vue2.0的使用模板：

顺序无所谓，但是一定要按照这些键值对来玩

         new Vue({
         el:"#box",//vue确定使用范围，只能在id叫box的元素里，才可以使用vue的语法，控制环境范围
         data:{//模型数据：vue专门为你提供了放变量的地方
             变量名:值,
             ...
         },
         methods:{//事件方法：vue专门为你提供了放事件的地方
             函数名(){
                 功能
             },
             ...
         },
     })

2、vue2的class和style操作样式 - vue.js在控制样式：

 1、class操作样式：- 两种语法糖
         <elem :class="obj"></elem> - 对象口味的语法糖，对应下方的模型数据，可知class最终只有aa和bb
         <elem :class="arr"></elem> - 数组口味的语法糖，对应下方的模型数据，可知class最终只有aa和bb
 
         new Vue({
             el:"#box",
             data:{
                 obj:{ - 对象口味的语法糖
                     aa:true,
                     bb:true,
                     cc:false,
                     ...
                 }, - 后续不能直接添加dd，vue底层具有拦截机制，想要添加，必须vue提供的方法：Vue.set(Vm对象.obj,"dd",true)
                 arr:["aa","bb",...] - 可以随时的添加和删除，相比对象口味语法糖更加的随意简单
             },
         })

 2、style内联操作样式：
         <elem :style="obj"></elem> - 对象口味的语法糖，对应下方的模型数据，可知现在具有背景颜色为红色
         <elem :style="arr"></elem> - 对象口味的语法糖，对应下方的模型数据，可知现在具有背景颜色为红色
 
         new Vue({
             el:"#box",
             data:{
                 obj:{ - 对象口味的语法糖
                     backgroundColor:"red",
                     ...
                 }, - 后续不能直接添加样式，vue底层具有拦截机制，想要添加，必须vue提供的方法：Vue.set(Vm对象.obj,"样式名","样式值")
                 arr:[{"backgroundColor":"red"},...]
             },
         })

三、vue2，3公共用法

1、vue插值表达式：

{{变量}} - 在HTML上实现了一个基本的js环境，可以进行js运算、放入变量、三目、甚至API都可以在HTML上书写

2、vue指令：

写在HTML上的v-xxx的特殊属性，就是所谓的指令

 vue指令：写在HTML上的v-xxx的特殊属性，就是所谓的指令
     v-html - 类似于innerHTML，可以识别渲染标签
         语法：<elem v-html="变量"></elem> - 此标签中就会具有变量的值/内容
         特殊：不要使用插值表达式渲染页面，插值表达式类似的是innerText不识别标签的，当作原文处理
 
     v-for - 类似for in循环，数据渲染！
         语法：<elem v-for="(v,i) in 数组名"></elem> - 会根据数组中的元素渲染出多个此元素elem，可以拥有值和下标（由你自己决定）
 
     v-model - 具有双向数据绑定功能，页面控制变量，变量也能控制页面
         语法：<input  v-model="变量"> - input的默认值就为变量的值，并且input修改内容，变量也会跟着一起变化（以后可以不用oninput/onblur事件就可以得到用输入的value）
 
     v-show - 隐藏和显示，传入的是一个布尔值，底层原理：display:block/none;
     v-if - 是否渲染，，传入的是一个布尔值，底层原理：appendChild/remove;
         语法：<elem v-show/if="布尔变量"></elem>//如果布尔值为true则显示，如果为false则隐藏
 
     v-bind:属性名="变量" - 意味着原来JS标准属性里面是不可以放入变量的，但是现在可以了，简写方式 - :class="变量"
 
     v-on:事件名="函数名()" - 绑定事件的，简写方式 - @事件名="函数名()";

标签：语法,vue,变量,...,样式,学习,VUE,随笔,class
From： https://www.cnblogs.com/SenorCoconut/p/16952064.html

VUE学习随笔

VUE