vue初识（小白跟着就对了，因为我也是小白）

vue初识

（一）Vue.js

概念：Vue.js是一套响应式系统，前端开发库，用于构建用户界面的渐进式框架

(渐进式：根据需求和功能逐步实现)

1、为什么使用Vue？

网页是由DOM元素组成的视图结构，再加上CSS样式修饰，结合JS实现与用户的交互。我们把最基本的视图结构成为视图层，这部分是Vue核心库关注的部分；一些页面元素非常多，如果使用传统的开发模式，页面解构会显得代码臃肿，Vue.js解决了这些问题

2、Vue.js的特点及优势（易用、灵活、高效）

特点：与其他框架相比，Vue最为轻量化，可以快速迭代更新

优势：

1）轻量级的框架

2）可以双向数据绑定

3）指令

4）组件化

5）客户端路由

6）状态管理

（！！---注意---！！）>>>>>>>>> Vue必须在ES5版本以上的环境中使用

（二）Vue.js下载和引用

1、Vue.js的下载

下载地址：https://cn.vuejs.org/

下载版本：开发版本/生产版本

1）开发环境：自己电脑的环境（包含警告和调试）

2）生产环境：线上环境---测试环境（与生产环境一致，没有警告，优化了尺寸和速度）

2、Vue.js的引用

只要引入了Vue.js，那么全局就会有一个Vue对象

1）引入方式：

2）使用(引入之后)

//创建元素 
<div id = 'app'> <div>{{msg}}}</div> <!-- {{}} 胡子语法 --> 
<p v-html='msg'></p> </div> 

<script>

//实例化

let vm = new Vue({ // element 挂载app el:'#app',
 data:{ // 需要往页面渲染的所有数据都需要在data中声明
 msg:'hello world!', 
 content:'优就业' 
}})

</script>

使用之后，频发刷新页面会发现标签闪烁问题

（！！解决闪烁问题）：

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叫做指令

使用注意事项！！！！！

一定要绑定元素
需要往页面渲染的所有数据都需要在data中声明
el：element---绑定的元素
[v-cloak]{dispayl:none}:属性选择器解决闪烁问题（不可更换）---放在最外层的元素上
在元素行内只用指令v-html=’属性名‘，渲染属性中的内容，解决闪烁问题

（三）Vue指令

如果使用指令绑定数据（属性），则该元素中间的内容会被覆盖

（1）v-html：用来渲染页面：可以识别标签

　　 v-text：用来渲染页面：不可以识别标签

（2）v-if、v-else、v-else-if ：用来判断

v-if='布尔值'（可以是表达式，数字型0、null、undefined、NaN、false ---表示假）
v-if 后面跟三元表达式，根据最终结果来判断
v-if和v-else之间不能用任何内容（v-else后面什么也不写）

（3）v-show：用来判断等同于给元素添加了display：none属性

**v-if和v-show的区别**

（1）v-if是移除元素，v-show是隐藏元素

（2）v-if偶尔使用，比如勾选协议；v-show是频繁切换，比如选项卡

（4）v-for：用来循环

循环数组内容和下标

<div v-for='(item,index) in arr'>{{item}}------{{index}}</div> //item:数组中的每一项，可以自定义 //index：数组中每一项的下标

循环对象（顺序不能变，第一个就是代表value值，第二个就是代表键，第三个就是下标）

<p v-for='(item,key,index) in obj'>{{item}}------{{key}}---{{index}}</p> //item:代表对象中的value //key：代表对象中的键 //index：代表对象中的下标

（5）v-bind：绑定属性

v-bind:src 绑定属性，可以简写:src

v-bind:绑定属性不仅可以绑定已经存在的属性，还可以绑定自定义属性 --> <a v-bind:href="url" :aa='aa'>点击跳转</a> 注意:绑定属性均需要在data中声明

（6）v-on：绑定方法

v-on：事件='方法名（）'

简写：@事件='方法名（）'

 <!-- v-on绑定方法  需要在实例中声明methods方法 与data同级-->

    <!-- 创建一个元素 -->
    <div id="app">
        <!-- 语法：v-on:事件='方法名' -->
        <!-- ！！注意：当方法中不传参的时候，可以省略小括号 -->
        <button v-on:click="alert">点击弹框</button>
        <!-- 简写@事件='方法名' -->
        <button @click="alert">点击弹框</button>
    </div>

    <!-- 引入Vue -->
    <script src="./vue.js"></script>
    <!-- 实例对象 -->
    <script>
        let a = new Vue({
            el:"#app",
            // 声明一个methods方法
            methods:{
                alert(){
                    alert(123)
                }
            }
        })
    </script>

（7）v-model：双向数据绑定只能用于表单元素

<!-- v-model : 双向数据绑定，只能用于表单元素 -->

    <div id="app">
        <!-- 视图 -->
        <input type="text" v-model="abc">{{abc}}
    </div>

    <!-- 引入Vue -->
    <script src="./vue.js"></script>
    <script>
        let a = new Vue({
            el:"#app",
            data:{
                // 模型 
                abc:"今天不错"
            }
        })
    </script>
    <!-- 可以看到，通过改变视图的内容，模型的内容也会跟着改变 这种叫做MVVM模式 -->
    <!-- MVVM: M--model/ V---view/ VM(viewModel)是一个控制器，也是一种设计模式，在当前页面表示引入的Vue -->

    <!-- MVVM设计模式-----代表框架Vue
    1）擅长做数据的增删改查
    2）不擅长做动画和操作DOM
    -->

    <!-- MVC:M--model/ V---view/ C---control控制器 -->
    <!-- MVC设计模式------代表框架React -->

（四）常见案例

　　1------九九乘法表

<div id="app"> 
　　<div v-for='i in arr'>    //外循环循环每行
　　<span v-for='j in arr' v-if='i>=j'>  //内循环循环每列
　　　　　　{{i}}*{{j}} = {{i*j}}  
　　</span> 
　　</div> 
</div> 
<script> 
let a = new Vue({
 el:"#app", 
data:{ arr:[1,2,3,4,5,6,7,8,9] 
} }) 
</script>

2------点击显示隐藏

<div id="app">
        <!-- 给button绑定方法 -->
        <button @click="type">切换</button>
        <!-- 给p标签添加判断 -->
        <p v-if="on">点击隐藏</p>
    </div>

    <!-- 引入Vue -->
    <script src="./vue.js"></script>
    <script>
        let a = new Vue({
            el:"#app",
            // 声明一个属性，作为判断依据
            data:{
                on:"true"
            },
            methods:{
                // 声明一个方法，用来改变属性状态
                type(){
                    this.on = !this.on
                }
            }
        })
    </script>

3------表单的增删盖查

<div id="app">
        <h3>学生信息</h3>
        <!-- 分别给两个表单双向数据绑定 -->
        <div>姓名: <input type="text" v-model="name"></div>
        <div>成绩: <input type="text" v-model="score"></div>
        <!-- 给两个按钮设置绑定方法 -->
        <button @click="add">添加</button>
        <button @click="res">重置</button>


        <table border="1" style="width:500px;border-collapse: collapse;">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
            <!-- for循环 循环数组数组内是一个个对象 -->
            <tr v-for="(item,index) in arr">
                <td>{{index+1}}</td> <!-- 编号刚好是下标+1 -->
                <td>{{item.name}}</td> <!-- item代表数组中的每个对象，对象都有一个name属性 -->
                <td>{{item.score}}</td> <!-- item代表数组中的每个对象，对象都有一个score属性 -->
                <!-- 给删除按钮绑定del方法 -->
                <td><button @click="del">删除</button></td>
            </tr>
            <!-- 判断 如果数组的长度为0 则表示没有数据，这个时候展现暂无数据 -->
            <tr v-if="arr.length == 0">
                <td colspan="4">
                    暂无数据
                </td>
            </tr>
            <!-- 否则展示 全部删除 -->
            <tr v-else>
                <td colspan="4">
                    <!-- 给全部删除绑定全部删除方法 -->
                    <button @click="all">全部删除</button>
                </td>
            </tr>
        </table>
    </div>

    <script src="./vue.js"></script>
    <script>
        let a = new Vue({
            el:"#app",
            data:{
                name:"",
                score:"",
                arr:[
                    {
                        name:"张三",
                        score:"90",
                    }
                ]
            },
            methods:{
                // 重置
                res(){
                    this.name="",
                    this.score=""
                },
                // 添加
                add(){
                    this.arr.push({
                        name:this.name,
                        score:this.score
                    })
                },
                // 删除所点击的每行
                del(index){
                    this.arr.splice(index,1)
                },
                // 全部清空
                all(){
                    this.arr = []
                }
            }
        })
    </script>

------------恢复内容开始------------