Vue学习（一）

最新推荐文章于 2024-07-23 12:36:06 发布

Livingdd

最新推荐文章于 2024-07-23 12:36:06 发布

阅读量127

点赞数

分类专栏： Vue学习文章标签： vue 前端

本文链接：https://blog.csdn.net/Livingdd/article/details/95780974

版权

Vue学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.环境搭建

通过下载vue或者使用<script>标签的方式来使用vue。

1.使用script标签

 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

2.下载VUE

使用npm下载 npm install vue ，推荐使用淘宝镜像cnpm

详情参考vue官网：下载

2.模板语法

vue允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

提供了v-html、v-on、v-bind等标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .bg{
            color: red;
        }
    </style>
   <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
    <div class="bg">
        <div class="app">
                {{msg}}
        </div>
        <div class="app">
                {{msg}}
        </div>
       {{count+1}}
       <div v-html="template"></div>
       <a v-bind:href="url">百度</a>
       <a :href="url">百度</a>
       <button type="button" v-on:click="submit()">点我</button>
       <button type="button" @click="submit()">点我</button>
    </div>
    <script type="module">
        new Vue({
            el: '.bg',
            data: {
                msg: 'hello vue!',
                count: 0,
                template: '<div>hello template</div>',
                url: 'https://www.baidu.com'
            },
            methods: {
                submit: function(){
                    this.count++;
                }
            }
        })
    </script>
</body>
</html>

详情见vue文档模板语法

3.计算属性与监听器

可以在模板语法中插入简单的运算，但在模板中放入太多的逻辑会让模板过重以及难以维护。这时使用计算属性computed来解决。

vue提供了watch来响应式的监听data中数据的变化。可以在控制台中改变jjj与msg的值观察两者的区别。

<body>
    <div id="app">
        {{msg}}
        <br>
      
    </div>
    <script>
        var arr ='jjj'
       var app = new Vue({
            el: '#app',
            data: {
                msg: 'hello vue',
              
                another: 'another'
            },
            watch:{      
                msg: function(newval, oldval){
                    console.log('newval is ' + newval);
                    console.log('oldval is ' + oldval);
                },
            },
            computed: {
                msg1: function(){
                    return this.msg + '   computed  '+this.another+'  '+arr;
                }
            }
        })
    </script>
</body>

详情：vue文档

4.条件渲染

vue提供了v-if、v-show、v-else、v-else-if 。使用v-if时使用key来管理重复元素。

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

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

<body>
    <div id="app">
       <div v-if="count > 0">
           count大于0,count值为{{count}}
       </div>
       <div v-else>
            count小于0,count值为{{count}}
       </div>
       <div v-show="count == -1">show:{{count}}</div>
       {{msg}}
    </div>
    
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg :'hello Vue',
                count: 0
            }
        })
    </script>
</body>
</html>

5.class与style绑定

使用v-bind来绑定class与style。

<body>
    <div id="app">
        {{msg}}
        <div v-for="item in list">
            <div v-if="item.age >20" 
                :style="styleMsg"
                :class="{'another' : item.age > 20}">大于20{{item.name}}{{item.age}}</div>
            <div v-else>小于20{{item.name}}{{item.age}}</div>
            <div v-show="item.age>11">show:{{item.name}}{{item.age}}</div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'hello vue',
                list: [{name:'liwei',age:12},{name:'ycm',age:21}],
                styleMsg: {
                    color: 'red'
                }
            }
        })
    </script>
</body>
</html>

6.组件与列表渲染

偷个懒，将两个内容放在一起。

vue提供了v-for来实现列表渲染，注意，官方文档中不建议将v-for与v-if放在同一个标签中使用。

使用Vue.component来自定义组件，使用prpos来向子组件中传递数据。

<body>
    <div id="app7">
        <ol>
            <todo-item v-for="item in list" :key="item.id" :todo="item">

            </todo-item>
        </ol>
    </div>
    <script>
        Vue.component('todo-item',{
        props:['todo'],
        template:'<li>{{todo.text}}<li>'
        })
        var app7 = new Vue({
            el: '#app7',
            data:{
                list:[
                    {id:0,text:'蔬菜'},
                    {id:1,text:'奶酪'},
                    {id:3,text:'面包'}
                ]
            }
        })
    </script>
</body>

本文参考自vue官方文档。

本文只是vue的简单使用方法，详情请参考vue官方文档。

Livingdd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习（一）

1.环境搭建通过下载vue或者使用<script>标签的方式来使用vue。 1.使用script标签 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> 2.下载VUE 使用npm下载 npm install vue ，推荐使用淘宝镜...
复制链接

扫一扫

专栏目录