Vue初识

VUE初识

渐进式：按需添模块（根据功能需求逐次添加模块）

Vue的特点:

优点：

轻量级、双向数据绑定、指令、组件化、客户端路由、状态管理。

核心：

组件化、数据驱动

缺点：

个人维护

 

Vue的下载与引入:

下载：

　　// 开发版包含警告和调试模式，适用于开发调试

　　开发版：https://cdn.jsdelivr.net/npm/vue/dist/vue.js

　　// 生产版删除了警告，适用于上线

　　生产版：https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js

引入：

<!-- 1.cdn引入，注意有网络的时候使用 -->

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

<!-- 2.下载好js文件引入 -->

<!-- <script src=".ue.js"></script> -->

<!-- 3.node安装vue.js然后引入 -->

<!-- <script src=".de_modulesue/distue.min.js"></script> -->

Vue的使用:

创建元素
<div id="app">
<!-- {{}} 胡子语法 -->
<div>{{msg}}</div>
<p v-html='msg'></p>
</div>
实例化：
new Vue({
// element 挂载app
el:'#app',
data:{
// 需要往页面渲染的所有数据都需要在data中声明
msg:'hello world!',
}
})

解决闪烁问题：

闪烁问题：使用胡子语法的时候，页面刷新会闪烁出大括号

解决：

1.给id=‘app'增加v-cloak属性，通过设置样式来解决闪烁

<div id="app" v-cloak>
</div>
<style>
/* 属性选择器 */
[v-cloak]{
display: none;
}
</style>

2.使用指令

<p v-html='msg'></p> v-html叫做指令

Vue指令

1.v-text和v-html

区别：v-html可以识别标签，v-text不能识别标签

     new Vue({
        el: ".wrap",
        data: {
            msg: "<h1>加油，打工人</h1>",
            num: 11
        }
    })
 
例如：使用v-html指令输出msg可以识别h1标签，而v-text指令输出的是<h1>加油，打工人</h1> ，没有识别标签

2.v-if,v-else,v-else-if,v-show

v-if和v-else：

<div v-if=0>加油，打工人</div>
<div v-else>回家歇着去吧</div>

v-show：

<div v-show='msg'>我是通过指令v-show显示</div>
<div v-show='false'>我是通过指令v-show显示</div>

v-else-if:

<div v-if='num>10'>大于10</div>
<div v-else-if='num==10'>等于10</div>
<div v-else>小于10</div>

注意：1.v-if与v-else之间不能有其他内容

          2. v-if 后面可以跟表达式，0，null，undefined，NAN，false 为假的

          3.v-if和v-show的区别:

             v-if 移除元素，偶尔使用

             v-show:设置display属性 频繁切换

3.v-for：

<!-- item 代表的是要循环的数组中的每一项 -->
<div v-for='(item,index) in arr'>{{item}}------{{index}}</div>
<hr>
<!-- item 代表的是对象中的value值 -->
<p v-for='(item,key,index) in obj'>{{item}}------{{key}}---{{index}}</p>

4.v-bind：绑定属性 不仅可以绑定已经存在的属性，还可以绑定自定义属性

注意：绑定属性均需要在data中声明

<a v-bind:href="url" v-bind:aa='aa'>点击跳转</a>

简写：（直接一个：）

<a :href="url" :aa='aa'>点击跳转</a>

5.v-on：在与data同级声明一个methods对象

<button v-on:click='alert()'>点击弹出</button>

简写：（直接一个@）

<button @click='alert()'>点击弹出</button>

注意：同时方法名如果不需要传参，那么小括号可以省略，如果需要传参务必带括号

<button @click='alert(index)'>点击弹出</button>

6.v-model:双向数据绑定

注意：

// 双向数据绑定只能应用于表单元素

// 模型可以控制视图，视图可以修改模型 M（model）V(view) VM(viewModel)控制器

// MVVM设计模式:擅长做数据的增删改查 不擅长做动画和操作DOM vue

// MVC 设计模式: M(model) V（view） C(control)控制器 react

<div id="app">
<!-- 视图 -->
<input type="text" v-model='msg'>
    {{msg}}
</div>
data: {
// 模型
msg:'hello world'
}