Vue学习

最新推荐文章于 2024-05-29 17:10:32 发布

lzm990311

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量82

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/lzm123456lq/article/details/115824730

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue官网

视频地址

1.序言

在这里插入图片描述

2.直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

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

3.helloWorld

el:element(元素)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head>
<body>
<div id="app">
    {{ message }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>

</html>

4.数据与方法

 var data={a:1};
    var vm = new Vue({
        el: '#app',
        data: data
    })
    vm.a=1233
    vm.$watch('a', function (newValue, oldValue) {
        // 这个回调将在 `vm.a` 改变后调用
        console.log(newValue,oldValue);
    })
    vm.$data.a=123

api
生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head>
<body>
<div id="app">
    {{message}}
</div>
<script>
    var data = {message:'hello vuejs'};
    var vue = new Vue({

        el:'#app',
        data:data,

        //生命周期函数
        beforeCreate:function (){
            console.log('beforeCreate');
        },

        created:function () {
            console.log('created');
        },

        beforeMount:function () {
            console.log('beforeMount');
        },

        beforeUpdate:function () {
            console.log(this.message);
            console.log('beforeUpdate');
        },
        updated:function () {
            console.log('updated');
        }
    })
    data.message = "hello Dcloud";
</script>
</body>

</html>

在这里插入图片描述

5.模板语法插值

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>插值</title>
    <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <p v-once>{{msg}}</p>
    <p>Using mustaches: {{rawHtml}}</p>
    <p v-html="rawHtml"></p>
    <div v-bind:class="color">test...</div>
    <p>{{number + 1}}</p>
    <p>{{ 1 == 1 ? 'yes' : 'no'}}</p>
    <p>{{message.split('').reverse().join('')}}</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hi vue',
            rawHtml: '<span style="color:red">this is should be red</span>',
            color: 'blue',
            number: 10,
            ok: false,
            message: 'vue'
        }
    })
    vm.msg=123
    console.log(vm.msg);
</script>
<style type="text/css">
    .red{color:red;}
    .blue{color: blue; font-size: 60px;}
</style>
</body>
</html>

6.模板语法-指令

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>指令</title>
    <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <a v-bind:href="url">...</a>
    <div @click="click1">
        <div @click.stop="click2">
            click me
        </div>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            seen: true,
            url: 'https://cn.vuejs.org/v2/guide/installation.html'
        },
        methods: {
            click1: function() {
                console.log('click1......');
            },
            click2: function () {
                console.log('click2......');
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

7.class与style绑定

在这里插入图片描述
数组绑定

8.条件渲染

在这里插入图片描述
v-show 都会渲染

在这里插入图片描述
9.列表渲染

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>指令</title>
    <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <ul id="example-1">
        <li v-for="item in items" :key="item.message">
            {{ item.message }}
        </li>
    </ul>
</div>
<script type="text/javascript">
    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ]
        }
    })
</script>
</body>
</html>

10.事件绑定
v-on

在这里插入图片描述

11.单文件组件

Nodejs/Npm安装/Cnpm安装