Vue--基础学习

叁歲伎倆 2023-07-01 15:56 6阅读 0赞

## Vue--基础学习 ##

最近又好久没更啦。。。趁着不能出门（冠状病毒你懂的）在家把最近学的笔记库存分享一下

### Vue.js是什么 ###

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

那么关于Vue使用的好处就不多说了直接来上手吧........

**1、第一个Vue应用-- Hello Vue**

<!DOCTYPE html>
    <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
          xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>HelloVue</title>
    </head>
    <body>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
    <div id="app">
        {
       { message }} 
    </div>
    
    <script>
        var app = new Vue({
            el: '#app',  //通过id绑定到div块
            data: {
                message: 'Hello Vue!'  
            }
        })
       
    </script>
    
    
    </body>
    </html>

**2、模板语法**

通过上面的写法不难看出最简单的插值是通过\{ \{\}\}  并且写法和javascript类似。一个Vue对象包含了

el：绑定块

data：数据块

.... （后面都会一一列举）就不详细讲解了....

关于指令方面下面用的都是简写 比如v-bind 直接用 ：代替  v-on  用@代替  更多的可以去参考本文底部的官方文档。

**3、计算属性和侦听器**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <div id="app">
        {
       { message }}
        <br>
        {
       { message1 }}
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"Hello Vue！",
                computedTest:"computedTest"
            },
            watch:{
                message:function (newval,oldval) {
                   console.log("新的值"+newval);
                   console.log("旧的值"+oldval);
               }
            },
            computed:{
                message1:function () {
                    return this.computedTest+":"+this.message;
                }
            }
    
        });
    </script>
    </body>
    </html>

大家可以通过开发者工具来调试代码如图：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70][]

结论：计算属性可以是动态监听Vue里全部变量的变化，侦听器只能动态监听当前属性的变化

**4、条件渲染、列表渲染、Class与Style绑定**

条件渲染就是通过if else-if else 和java里的判断逻辑类似  在Vue中v-show 也可以做到类似条件渲染的功能 至于他们的区别大概就是v-show 是一开始就渲染了  这里可能有点抽象...参考资料：

**`v-if` 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。**

**`v-if` 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。**

**相比之下，`v-show` 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。**

**一般来说，`v-if` 有更高的切换开销，而 `v-show` 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 `v-show` 较好；如果在运行时条件很少改变，则使用 `v-if` 较好。**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <div id="app">
        {
       { message }}
        <br>
        {
       { message1 }}
        <br>
    
        <div v-if="count > 0 ">
           <p>count值大于0 </p>
        </div>
        <div v-else-if="count == 0 ">
            <p>count值等于0</p>
        </div>
        <div v-else>
            <p>count值小于0</p>
        </div>
    
        <div v-show="count == 0">
            <p> count值等于0 </p>
        </div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"Hello Vue！",
                computedTest:"computedTest",
                count:0
            },
            watch:{
                message:function (newval,oldval) {
                   console.log("新的值"+newval);
                   console.log("旧的值"+oldval);
               }
            },
            computed:{
                message1:function () {
                    return this.computedTest+":"+this.message;
                }
            }
    
        });
    </script>
    </body>
    </html>

列表渲染的指令是v-for 和java里的for循环差不多

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <div id="app">
        {
       { message }}
        <br>
        {
       { message1 }}
        <br>
        
        <div v-if="count > 0 ">
           <p>count值大于0 </p>
        </div>
        <div v-else-if="count == 0 ">
            <p>count值等于0</p>
        </div>
        <div v-else>
            <p>count值小于0</p>
        </div>
    
        <div v-show="count == 0">
            <p> count值等于0 </p>
        </div>
        
    
        <div v-for="item in list">
            {
       {item.name + item.age}}
        </div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"Hello Vue！",
                computedTest:"computedTest",
                count:0,
                list:[
                    {
                        name:'张三',
                        age:'18'
                    },
                    {
                        name:'李四',
                        age:'20'
                    }
                ]
            },
            watch:{
                message:function (newval,oldval) {
                   console.log("新的值"+newval);
                   console.log("旧的值"+oldval);
               }
            },
            computed:{
                message1:function () {
                    return this.computedTest+":"+this.message;
                }
            }
    
        });
    </script>
    </body>
    </html>

Class与Style绑定就是可以用来切换css样式和动态变化css样式

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <div id="app">
        {
       { message }}
        <br>
        {
       { message1 }}
        <br>
        
        <div v-if="count > 0 ">
           <p>count值大于0 </p>
        </div>
        <div v-else-if="count == 0 ">
            <p>count值等于0</p>
        </div>
        <div v-else>
            <p>count值小于0</p>
        </div>
    
        <div v-show="count == 0">
            <p> count值等于0 </p>
        </div>
        
    
        <div v-for="item in list">
            {
       {item.name + item.age}}
        </div>
    
        
        <div :style="style">
            <p>试试改变颜色</p>
        </div>
    
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"Hello Vue！",
                computedTest:"computedTest",
                count:0,
                list:[
                    {
                        name:'张三',
                        age:'18'
                    },
                    {
                        name:'李四',
                        age:'20'
                    }
                ],
                style:{
                    color : 'red'
                }
    
            },
            watch:{
                message:function (newval,oldval) {
                   console.log("新的值"+newval);
                   console.log("旧的值"+oldval);
               }
            },
            computed:{
                message1:function () {
                    return this.computedTest+":"+this.message;
                }
            }
    
        });
    </script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 1][]

**5、事件监听**

<!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <div id="app">
        {
       { message }}
        <br>
        {
       { message1 }}
        <br>
        
        <div v-if="count > 0 ">
           <p>count值大于0 </p>
        </div>
        <div v-else-if="count == 0 ">
            <p>count值等于0</p>
        </div>
        <div v-else>
            <p>count值小于0</p>
        </div>
    
        <div v-show="count == 0">
            <p> count值等于0 </p>
        </div>
        
    
        <div v-for="item in list">
            {
       {item.name + item.age}}
        </div>
    
        
        <div :style="style">
            <p>试试改变颜色</p>
        </div>
    
        
       <div >
           <button v-on:click="cc">点击按钮改变样式</button>
       </div>
    
    
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"Hello Vue！",
                computedTest:"computedTest",
                count:0,
                list:[
                    {
                        name:'张三',
                        age:'18'
                    },
                    {
                        name:'李四',
                        age:'20'
                    }
                ],
                style:{
                    color : 'red'
                },
            },
            watch:{
                message:function (newval,oldval) {
                   console.log("新的值"+newval);
                   console.log("旧的值"+oldval);
               }
            },
            computed:{
                message1:function () {
                    return this.computedTest+":"+this.message;
                }
            },
            methods: {
                cc: function () {
                   console.log("green")
                    this.style.color="green"
                }
            }
    
        });
    
    </script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 2][]

**6、表单绑定**

通过v-model指令进行双向绑定

<!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <div id="app">
        {
       { message }}
        <br>
        {
       { message1 }}
        <br>
        
        <div v-if="count > 0 ">
           <p>count值大于0 </p>
        </div>
        <div v-else-if="count == 0 ">
            <p>count值等于0</p>
        </div>
        <div v-else>
            <p>count值小于0</p>
        </div>
    
        <div v-show="count == 0">
            <p> count值等于0 </p>
        </div>
        
    
        <div v-for="item in list">
            {
       {item.name + item.age}}
        </div>
    
        
        <div :style="style">
            <p>试试改变颜色</p>
        </div>
    
        
       <div >
           <button v-on:click="cc">点击按钮改变样式</button>
       </div>
    
        
        <div>
            <input type="text" v-model="input_msg">
    
            {
       {input_msg}}
        </div>
    
    
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"Hello Vue！",
                computedTest:"computedTest",
                count:0,
                list:[
                    {
                        name:'张三',
                        age:'18'
                    },
                    {
                        name:'李四',
                        age:'20'
                    }
                ],
                style:{
                    color : 'red'
                },
                input_msg:""
            },
            watch:{
                message:function (newval,oldval) {
                   console.log("新的值"+newval);
                   console.log("旧的值"+oldval);
               }
            },
            computed:{
                message1:function () {
                    return this.computedTest+":"+this.message;
                },
            },
            methods: {
                cc: function () {
                   console.log("green")
                    this.style.color="green"
                }
            }
    
        });
    
    </script>
    </body>
    </html>

推荐官方教程：[https://cn.vuejs.org/v2/guide/installation.html][https_cn.vuejs.org_v2_guide_installation.html]

推荐视频教程：[https://www.imooc.com/video/18551][https_www.imooc.com_video_18551]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200123210615706.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200124101242737.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200131095752649.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE=,size_16,color_FFFFFF,t_70
[https_cn.vuejs.org_v2_guide_installation.html]: https://cn.vuejs.org/v2/guide/installation.html
[https_www.imooc.com_video_18551]: https://www.imooc.com/video/18551