vue初步认识

一、Vue介绍

提高开发效率
Javascript 可以实现前端所有交互
document.getElementById()

JQuery 一个原生js封装的一个方法库
$(’’).appdenTo(’’)

Angular、React、Vue 数据驱动视图
不需要操作DOM，只需要操作数据

二、vue的基本使用

vue是一个渐进式的框架
把技术文档当做小说去看

 new Vue({  //初始化Vue对象
    el:'#app', //划定Vue方法所生效的区域
    data:{   //需要使用Vue来呈现的数据包
        msg:"Hello World" 
    }
})

三、vue常用语法

1. 渲染数据

{{msg}}
{{abc ? '已收藏' : '收藏'}}

2. 属性绑定

<div class="box" v-bind:class="isActive ? 'active' : ''"></div>
<img v-bind:src="imgSrc" alt="">

3. 条件渲染

<div class="box" v-if="isShow"></div>

4. 事件绑定

<button v-on:click="handleCollect">控制收藏文字的显示</button>
<button @click="handleBox">控制box显示隐藏</button>

四、vue指令内部可以写哪些语法？

<div class="cont" v-if="bool">内容1</div>
<div class="cont" v-if="!bool">内容2</div>
<div class="cont" v-if="n==1">内容2</div>
<div class="cont" v-if="n>=1">内容2</div>