初识vue、vue基础

# vue基础

## vue介绍

Vue (读音 /vjuː/，类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与[现代化的工具链](https://cn.vuejs.org/v2/guide/single-file-components.html)以及各种[支持类库](https://github.com/vuejs/awesome-vue#libraries--plugins)结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue全家桶：vue        vue脚手架（vue-cli）    vue路由（vue-router）        vuex        axios

## vue的安装

1、通过script标签引入js文件

​        [开发版本](https://cn.vuejs.org/js/vue.js)包含完整的警告和调试模式

​        [生产版本](https://cn.vuejs.org/js/vue.min.js)删除了警告，37.31KB min+gzip

2、npm安装

3、通过vue脚手架安装（vue-cli）

4、使用cdn远程链接

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>

## vue实例

通过`new`关键字new出的一个Vue就是一个vue的实例：

var vm = new Vue()
// 使用el 可以把这个实例绑定到一个dom节点
var vm = new Vue({
    el:"#app"
})
// 使用data 在当前实例添加数据
var vm = new Vue({
    data:{
        msg:'hello',
        num:5
    }
})

## 数据渲染

### 不同渲染(插值表达式)

使用两对 {} 对数据进行渲染

html:
<div id="app">
    {{msg}}
    {{num}}
</div>

javascript:
var vm = new Vue({
    data:{
        msg:'hello',
        num:5
    }
})

### 条件渲染

使用 `v-if` 指令进行条件判断，对dom节点进行渲染

html:
<p v-if="isLog">已登录</p>   // 会渲染
<p v-else>未登录</p>          // 这个p标签不会渲染

javascript:
var vm = new Vue({
    data:{
        isLog:true
    }
})

### v-show

v-show和v-if用法一样，功能类似，也是通过条件判断一个数据是否渲染，不同的是：

​        v-if  如果不成立dom节点不会渲染

​        v-show 如果不成立dom节点将被设置为  display:none

### 列表渲染

列表渲染使用 v-for

html:
// 渲染数组
// list就是将要被循环的数组  item就是循环出来的每一项 这个循环将会渲染3个p标签
<p v-for="item in list">{{item}}</p>
// 渲染数组时 还可以接收第二个参数  代表数组的key
<p v-for="(item,index) in list">{{index}}-{{item}}</p>

javascript:
var vm = new Vue({
    data:{
        list:["学习javascript",123456,"学习小程序2"]
    }
})

// 渲染对象
html:
// obj就是将要被循环的对象  item就是循环出来的每一项
<p v-for="item in obj">{{item}}</p>
// 循环对象时可以接收第二个参数  代表对象的键
<p v-for="(item,name) in obj">{{name}}--{{item}}</p>
// 循环对象时可以接收第三个参数  代表对象的索引 从0开始递增
<p v-for="(item,name,index) in obj">{{index}}、{{name}}--{{item}}</p>

javascript:
var vm = new Vue({
    data:{
        obj:{
            title:"标题",
            author:"Edwin",
            time:20220726
        }
    }
})

## vue内置指令

在vue实例中  以 “v-” 开头的html属性 就叫做vue的指令，例如 v-for  v-if

### v-text指令

用于渲染文本 相当于innerTEXT

<p v-text="msg"></p>

<script>
var vm = new Vue({
    el:"#app",
    data:{
        msg:"今天天气不错"
    }
})
</script>

### v-html指令

用于渲染html内容 相当于innerHTML

<p v-html="con"></p>

<script>
var vm = new Vue({
    el:"#app",
    data:{
        con:"<a href='https://www.baidu.com'>跳转百度</a>"
    }
})
</script>

### v-bind指令

v-bind用于动态绑定html属性

<!--  vue指令后的引号代表js  可以直接使用data中的数据  -->
<a v-bind:href="url">跳转百度</a>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            url:"https://www.baidu.com"
        }
    })
</script>

### v-model指令

v-model指令用于表单元素的数据双向绑定

<input type="text" v-model="str">
<!-- v-model就相当于绑定了input的value值  当input发生改变时 会改变data数据中的str  当str发生改变时  会重新渲染p标签 -->
<p>{{str}}</p>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            str:"def"
        }
    })
</script>

## vue绑定事件

通过v-on给dom节点绑定一个事件

```html
<button v-on:click="num++">{{num}}</button>
<!-- v-on可以简写成@ -->
<button @click="num++">{{num}}</button>
```

### 响应事件函数

<button @click="calc(-1)">-</button>
<input type="text" size="2" v-model="num">
<button @click="calc(1)">+</button>

 <script>
     var vm = new Vue({
         el:"#app",
         data:{
             num:5
         },
         // methods 用于定义方法事件
         methods:{
             calc(n){
                 // 通过this.num 获取data数据中的num值
                 this.num = this.num + n
             }
         }
     })
</script>

### 动态绑定class

<b>动态绑定class类名</b><br>
<i>对象的方式 当值为true时 键当做类名绑定 当值为false时 不绑定当前类名</i>
<div v-bind:class="{'active':isActive,'danger':hasError}">这是个div</div>

<i>数组的方式  数组的每一项都会当做类名渲染</i>
<p :class="['aa','bb']">这三个类名一样</p>
<p class="aa bb">这三个类名一样</p>
<p :class="'aa bb'">这三个类名一样</p>
<p :class="[active,errorclass]">这是个p标签</p>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            isActive:true,
            hasError:false,
            active:"activea",
            errorclass:"danger"
        }
    })
</script>

### 动态绑定style

<b>动态绑定style</b>
<i>对象的方式 键当做样式的属性 值当做样式的值</i>
<p :style="{color:color,fontSize:fontSize}">有一段话</p>

<i>数组的方式 每个数组项都可以是一个样式的对象 然后把数组中的每个对象合并成一个style</i>
<p :style="[baseStyle,styles]">还有一段话</p>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            color:"red",
            fontSize:"20px",
            baseStyle:{
                margin:'0',
                padding:'0'
            },
            styles:{
                color:"#ff0",
                fontSize:"22px"
            }
        }
    })
</script>