Vue简介

Vue是一个渐进式的前端框架。什么是渐进式？ Vue全家桶
渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。比如、Core+Vue-router+Vuex+axios，也可以满足你各种各样的需求。
Vue开发的特点和Web开发常见的高级功能：
1、结构视图和数据
2、向数据绑定
3、用的组件
4、端路由技术
5、态管理
6、虚拟DOM
注意： 学习Vue框架的时候，必须严格遵循它的语法规则，在做Vue项目之前，必须先学习和掌握Vue的基本语法规则。

Vue的安装与使用

在项目里面引入Vue的方式：(在项目中使用Vue)
使用一个框架之前，要先下载安装
方式一：接CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

方式二：下载和引入

// 开发环境 https://vuejs.org/js/vue.js
// 生产环境 https://vuejs.org/js/vue.min.js

体验Vue

<body>
    <div id="app">
        {{ str1 }}
    </div>
</body>
<script>  
    var vm = new Vue({    //这个Vue对象用来控制某一个标签里面的数据
        el:"#app",   //要控制的标签
        data:{
            str1:"hello vue",   //定义一个数据，在id为app的标签内部去使用
        }
    })
</script>

Vue常见的语法格式（重点）

1、模板语法的初步认识

    <!-- 视图  view -->
    <div id="app">
    <!-- 插值语法  模板语法  胡子语法-->
        <p>{{ str1 }}</p>
        <p>{{ str1.split("").reverse().join("") }}</p>
        <p>{{num+1}}</p>
        <p>num1和numn2的最大值是：{{ num1>num2 ? num1 : num2 }}</p>
    </div>
    <!-- 数据 模型 model -->
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                str1:"hello",
                num:20,
                num1:40,
                num2:80
            }
        })
    </script>

2、v-bind控制标签属性

    <div id="app">
        <p>{{num}}</p>
        <!-- v-xxxx 指令
            v-bind: 的值可以是data中的数据，一般加在标签属性前面
            v-bind:  可以简写为 :
        -->
        <a v-bind:href="url1">百度一下</a>
        <a :href="url2">淘宝一下</a>

    </div>
    <script>

        new Vue({
            el:"#app",
            data:{
                num:20,
                url1:"http://www.baidu.com",
                url2:"http://www.taobao.com",
            }
        })
    </script>

3、v-on事件格式

    <div id="app">
        <p>num1的值为：{{num1}}</p>
        <p>num2的值为：{{num2}}</p>
        <p>num1和num2中较大的值为：{{num1>num2?num1:num2}}</p>
        <!-- v-on: 指令 专门绑定事件用的   v-on:事件名称
            v-on:简写为： @
        -->
        <button v-on:click="num1++">按钮1</button>
        <button @click="num1+=5">按钮2</button>
        <button @click="add(10)">按钮3</button>
    </div>

<script>
        let vm = new Vue({
            el:"#app",
            data:{
                // 变量名：值
                num1:20,   // 这里定义的不是全局变量
                num2:30,
            },
            methods:{
                // add:function(value){
                //     // 结论： 在函数中想要使用上面的data数据，需要通过 this.
                //     // console.log(this.num1);
                //     this.num1+=value
                // }
                // 方法名
                add(value){
                    // console.log(this.num1);
                    this.num1+=value
                }
            }
        })
    </script>

定义Vue对象基本格式总结

	var vm = new Vue({
        el: "要绑定的标签",
        data: {
            变量名1：值1,
            变量名2：值2,
            变量名3：值3,
            ...
        },
        methods: {
            方法名1: function(){

            },
            方法名2: function(){

            },
            方法名3: function(){

            }
        }
    });

vue控制类名和style样式(动态控制类名)（重点）

    <div id="app">
        <!--控制标签的类名 :class= 的值可以是 js对象 {类名：布尔值} -->
        <div class="box" :class="{box1:bool1, box2:bool2}"></div>

        <!--控制标签的类名 :class= 的值可以是 数组 [类名1，类名2] -->
        <div class="box" :class="['box3', 'box4']"></div>
        
        <!--掌握-->
        <div class="box" :class=" bool3 ? 'current':'' "></div>
        <!--通过控制bool3位真还是假，来控制这个盒子有还是没有current这个类-->
        
        <div :style="{fontSize:'40px' }">文字</div>
        <div :style="{ fontSize:false?'40px' : '50px'}">文字</div>
        <div :style="[{fontSize:false?'40px' : '50px'},{background:'pink'}]">文字</div>
    </div>

v-if和v-show指令（重点）

v-if 和 v-show 都是来控制标签是否显示，但是也有区别，v-show是对样式层面的控制，v-if是对dom节点的控制。

      <div id='app'>
        <!-- v-if 的值为false的时候， 整个节点会被浏览器给删除  涉及到DOM操作 -->
        <p v-if="false">第1个p标签</p>
        <p style="display: none;">第2个p标签</p>
        <!-- v-show的值为false 相当于上面的<p style="display: none;">第2个p标签</p> -->
        <p v-show="age>18">第3个p标签</p>

        <!--v-if 和v-else 两个标签之间不要有其他标签  -->
        <p v-if="false">第4个p标签</p>
        <p v-else>第5个p标签</p>

        <hr>
        <p v-if="type=='a'">第6个p标签</p>
        <p v-else-if="type=='b'">第7个p标签</p>
        <p v-else-if="type=='c'">第8个p标签</p>
        <p v-else>第9个p标签</p>
    </div>  
    <script>
        new Vue({
            el:'#app',
            data:{
                age:20,
                type:"a"
            }
        })
    </script>

列表和对象的渲染(初步使用)（重点）

     <div id="app">
       <ul>
            <!--i是列表中的每一个数据-->
            <li v-for="i in list1">{{ i }}</li>
       </ul>
       <ul>
            <!--i是列表中的每一个数据 j是每一个数据的下标-->
            <li v-for="(i, j) in list1">{{ i }} {{ j }}</li>
        </ul>

       <ul>
           <!--i是my_obj对象中的值-->
           <li v-for="i in my_obj">{{i}}</li>
       </ul>

       <ul>
           <!--i是my_obj对象中的值 j是my_obj对象中的键名-->
           <li v-for="(i, j) in my_obj">{{i}}  {{j}}</li>
       </ul>

   </div>
   <script>
       var vm = new Vue({
           el:"#app",
           data:{
               list1: ["javascript", "html", "css", "vue", "react"],
               my_obj: {
                   name: "javascript",
                   age: 24
               }
           }
       })
   </script>

表单数据绑定(双向数据绑定)（重点）

v-model 配合表单元素使用
拿到 v-model 的值，就是拿到用户输入的信息（原因是：用户在输入的时候，就是在修改txtVal这个值）
说白了就是：拿到txtVal，就是在拿用户输入的信息

    <div id='app'>
        <input type="text" v-model="txtVal">
        <p>{{txtVal}}</p>
        <hr>
        <select v-model="selVal">
            <option value="gz">广州</option>
            <option value="sh">上海</option>
            <option value="cd">成都</option>
        </select>
        <p>{{selVal}}</p>
    </div>  
    <script>
        new Vue({
            el:'#app',
            data:{
                txtVal:"默认值",
                selVal:"cd"
            }
        })
    </script>

Vue思维逻辑：
凡是在界面中看到的变化，都是data中的数据发生了变化引起的；
在li中多了一个元素(比如：发布评论这种)，都是在data中的数组arr中添加一个元素
arr.splice(要操作的元素的索引，要删除的个数，要增加的元素)

Vue基础