vue day1

初识Vue
Vue 是一个用于构建用户界面的MVVM的渐进式 声明式 组件式框架
编程思路：抛弃dom操作习惯，vue以数据驱动
特点
MVVM：
M =>V VM
数据 改变视图自动刷新 （通过VM的形式 Vue Vue返回的实例）
渐进式：
核心库体积很小（没有把所有功能都挂载在核心库上），通过插件形式将插件的功能挂载到Vue上
声明式开发：
声明式：Vue react（只告诉我要做什么，中间过程我不管）
命令式：jQuery（将程序中需要运行每个指令一步步的命令计算机运行）
安装
npm i vue
Vue雏形
创建一个Vue实例

const app = new Vue({
      el: "#app",   //element缩写，挂载实例 
      data: {       //放组件的数据
        msg: "3.15",   //可以写任意数据类型
      },
      methods: {     //放实例的方法，不能写箭头函数，因为会改变this指向
        one() {
          alert("haha");
        },
      },
    });

外部挂载：$mount

const app = new Vue({
      data: {
        msg: "3.15",
      },
      methods: {
        xixix() {
          alert(123);
        },
      },
    }).$mount(document.querySelector("#app"));

模板语法
声明式，响应式
{{}}
1.可以直接使用或者调用实例中的属性和方法，如果实例中没有会报错
2.{{}}中是js环境且最好是表达式，{{}}是写在视图实现数据渲染的
3.全局方法，vue {{}}创建了一些白名单可以使用

if (process.env.NODE_ENV !== 'production') {
  const allowedGlobals = makeMap(
    'Infinity,undefined,NaN,isFinite,isNaN,' +
    'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
    'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
    'require' // for Webpack/Browserify
  )

特点： 大部分处理数据，都有返回值
指令 directive
扩展了标签（组件）的属性的功能
<组件 v-指令名="值">
tips：1指令所在引号是js环境，且只能写表达式，不要写语句
2.变量会自动识别实例上的属性或者方法
3.全局有白名单
v-model：将表单控件的value与一个变量进行双向绑定
表单控件 文本框，密码框，单选框，多选框，文本域......
多选框初始值是bool，多个复选框可以传一个空数组获取多选框的value
下拉框是给select标签绑定，如果options有value值，则绑定的变量是选中的value，如果没有，则是option的文本
select多选可以将变量定义成数组，将select标签属性加上multiple 按下shift就可以多选
v-text ： 将 元素的 文本内容与一个变量进行绑定 不重要
没啥用，可被{{}}替代，此指令不能渲染富文本
v-html ：渲染富文本
v-bind：属性（属性是标签的普通属性包括自定义属性）
将组件或者标签的普通属性变成 动态属性（属性的值会和一个实例数据进行绑定）
<img v-bind:src="parseInt(val)===1?imgScr:imgScr2" //属性的值会变成js环境 alt="" />
简写 :属性
v-on 事件
vue中定义元素的事件，事件函数会与vue实例的方法进行绑定
方法要调用实例的变量可以this.xxx
<button v-on:click="fn">{{isshow?"消失":"显示"}}</button>
简写 @事件
事件绑定方式
@事件=fn
fn是事件函数，第一个参数就是事件对象
与@事件=fn()区别
fn不是事件函数，只不过 按钮点击时会触发
事件冒泡
如果是@click="fn"这样绑定的话可以直接在事件函数写

 fn3(e) {

            e.stopPropagation();
            console.log(3);
          },

如果是@click="fn()"这样绑定调用的话可以传入预定义好的变量$event就是事件对象

<div class="small" @click="fn3($event)"></div>

 fn3(e) {

            e.stopPropagation();
            console.log(3);
          },

事件修饰符
修饰绑定事件
@事件.修饰符
v-on:事件.修饰符
.stop
.prevent
.capture
.self
.once
.passive

.stop:阻止事件冒泡
.prevent 阻止元素默认行为
.capture 事件捕获阶段就提前触发
.self 当前元素绑定事件只能由自己触发，后代无法触发
.once 只触发一次

条件渲染
v-if 有条件的渲染一个元素 条件为false时，此元素不在dom树上
v-else if不成立时候执行，其必须是v-if所绑定的下一个兄弟元素，当v-if条件不成立时执行
v-else-if 多分支 注意：必须是连续的兄弟元素，且if是第一个元素，else是最后一个，else-if在中间

v-show
show与if区别
相同点： 都能改变元素的（显示、消失）切换状态，且值为true显示，false消失
1.一个是改变元素的display属性,一个是直接移除元素
2.当初始值是false时，vif所绑定的元素是惰性的（不加载）

tips：
重绘：当元素的样式发生更改时，浏览器绘重新渲染这个元素
回流：当元素大小位置边距移除，浏览器窗口尺寸等等发生变化时就会发生回流，重新排列dom树，其中元素移除显示则需要重新解析dom树，对性能消耗最大，回流一定能重绘，重绘不一定产生回流
使用场景：
v-show有更高的切换性能（频繁切换元素用v-show）
v-if 当初始值为false时，且不用频繁切换时，用v-if（v-if初始为false不加载）
列表渲染 循环
v-for="item in items"
如果需要下标
v-for="（item，index） in items"
循环对象时,第一个参数是值，第二个参数是键，第三个参数是下标
v-for="（value，key，index） in obj"
总结：第一项一定是元素，第二项如果是数组则是下标，如果是对象则是key，只有对象才有第三项，参数是下标
Vue中的class
:class里面可以写一个数组，里面每个元素都是一个js环境，
<div :class="[a,b,'box3',8+3==12?'one':'two']"></div>

:class里面可以写一个对象，对象每个值都是一个js环境，当值为true时，键会被渲染到元素的类上
<div :class="{checked:true}"></div>
数组和对象还可以互相嵌套

vue其他指令
v-pre 格式化数据
v-cloak 等待页面加载好在渲染指定数据
v-once 只渲染一次数据