vue.js经典实例代码(持续更新中~）

最新推荐文章于 2024-08-31 10:00:01 发布

Williamoses

最新推荐文章于 2024-08-31 10:00:01 发布

阅读量6.9k

点赞数 7

分类专栏： Vue.js

本文链接：https://blog.csdn.net/moses_binson/article/details/88688621

版权

Vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

按照传统，首先输出hello world.

1.数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <p v-bind:title="message">边境牧羊犬</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello world.'
        }
    })
</script>
</body>
</html>

内置指令v-bind为标签绑定title属性。

打开控制台，输入vm.message="hello vue",页面就会刷新成hello vue,之前渲染完成后如需再次修改视图，就只能通过获取DOM的方法进行修改，手动维持数据和视图的一致，现在只需要改数据就可以，代码更加简洁易懂、提升效率。这就是vue的基础特性数据绑定。

2.双向数据绑定

v-model指令可以对表单元素进行双向数据绑定，在修改表单元素值的同时，实例vm中对应的属性值也同时更新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--text-->
    <input type="text" v-model="message">
    <span>你输入的是：{{message}}</span>
    <br>
    <!--radio-->
    <label><input type="radio" value="male" v-model="gender">男</label>
    <label><input type="radio" value="female" v-model="gender">女</label>
    <p>{{message}}</p>
    <!--checkbox-->
    <input type="checkbox" v-model="checked">
    <span>checked:{{checked}}</span>
    <br>
    <!--多个勾选框-->
    <label><input type="checkbox" value="1" v-model="multiChecked">1</label>
    <label><input type="checkbox" value="2" v-model="multiChecked">2</label>
    <label><input type="checkbox" value="3" v-model="multiChecked">3</label>
    <p>MultiChecked:{{multiChecked.join('|')}}</p>
    <!--select-->
    <select v-model="selected">
        <option selected>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected:{{selected}}</span>
    <br>
    <br>
    <select v-model="multiSelected" multiple>
        <option selected>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>MultiSelected:{{multiSelected.join('|')}}</span>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message:'',
            gender:'',
            checked:'',
            multiChecked:[],
            selected:'',
            multiSelected:[],
            a:'checked',
            b:'checked',
        }
    });
</script>
</body>
</html>

3.模板渲染

早期的web项目一般都是服务器进程从数据库获取数据后，利用后端模板引擎，将数据加载进来生成HTML，再传到用户浏览器解析成可见的页面。而前端渲染则是在浏览器中进行，利用js把数据和HTML模板进行组合。前后端渲染互有优缺点，需要根据业务需要选择技术方案。

前端渲染的优点：

①业务分离，只需要后端提供数据接口，前端开发也不需要部署对应的后端环境，通过代理服务器工具就能远程获取后端数据开发。

②计算量转移，原本需要后端渲染的事情交给前端，减轻服务器压力。

后端渲染优点：

①搜索引擎舒服滴很。

②首页加载时间短，我们基于angular做的系统，那个加载中的圈圈看着闹心。

vue.js 2.0已经支持服务器端渲染，例如基于React 的服务器端渲染应用框架 Next.js的服务器端渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in items">
            <h3>{{item.title}}</h3>
            <p>{{item.description}}</p>
        </li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            items:[
                {title:'《唐诗三百首》',description:'劝君更进一杯酒，西出阳关无故人'},
                {title:'《诗经》',description:'窈窕淑女，君子好逑'},
                {title:'《宋词》',description:'稻花香里说丰年，听取蛙声一片'},
                {title:'《元曲》',description:'快使用双节棍，哼哼哈嘿'}
            ]
        }
    });
</script>
</body>
</html>

items为data中的属性名，item为别名，可以通过item来获取当前数组遍历的每个元素。

4.事件绑定

vue.js提供了内置指令v-on指令用来监听DOM事件，通常直接在模板内使用，不用通过js方式获取DOMM元素，然后绑定事件。

绑定methods函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="say">打招呼</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'hello Moses',
        },
        methods:{
            say:function(){
                alert(this.msg);
            }

        }
    });
</script>
</body>
</html>

5.自定义指令

和js中的变量一样，分全局变量和局部变量，自定义指令也分全局注册和局部注册。

通过Vue.derective(id,definition)方法注册一个指令，封装对DOM元素的重复处理行为，提高代码复用率。

全局注册指令：[Vue.directive(id,definition)方法]

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

这里只是注册了指令，并没有赋予这个指令功能，指令要接受参数id和定义对象，id是指令的唯一标志，定义对象则是指令的相关属性和钩子函数，例如可以传入代码中的definition定义对象，主要是三个钩子函数：bind、update和unbind。

全局指令用法：

<div v-focus> </div>

局部自定义指令：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

局部自定义指令用法：（只能在组件内调用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>

<div id="container">
    <p>{{msg}}</p>
    <button @click="handleClick">点 我</button>
    <h1 v-if="count < 8" v-change="count">it is a custom directive</h1>
</div>
<script>
    //directive
    new Vue({
        el: '#container',
        data: {
            msg: 'Hello Vue',
            count: 0
        },
        methods: {
            handleClick: function () {
                //按钮单击，count自增
                this.count++;
            }
        },
        directives: {
            change: {
                bind: function (el, bindings) {
                    console.log('指令已经绑定到元素了');
                    console.log(el);
                    console.log(bindings);
                    //准备将传递来的参数
                    // 显示在调用该指令的元素的innerHTML
                    el.innerHTML = bindings.value;
                },
                update: function (el, bindings) {
                    console.log('指令的数据有所变化');
                    console.log(el);
                    console.log(bindings);
                    el.innerHTML = bindings.value;
                    if (bindings.value == 8) {
                        console.log(' it is a test');
                    }
                },
                unbind: function () {
                    console.log('解除绑定了');
                }
            }
        }
    })
</script>
</body>
</html>

指令除了以上的钩子函数外，还有一些其他选项，params：定义对象可以接受一个数组、定义实例写回数据twoWay、允许自定义指令接受内联语句、terminal阻止遍历、priority指定指令优先级。

6.动画效果【过渡系统】

过渡系统是vue.js为DOM动画效果提供的一个特性，TA能在元素从DOM中插入或者移除的时候触发css过渡和动画，DOM元素发生变化时为其添加特定的class类名，从而产生过渡效果。也可以通过暴露钩子函数和配合JavaScript动画库实现动画效果，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
</head>
<body>
<div id="example-8">
    <input v-model.number="firstNumber" type="number" step="20"> +
    <input v-model.number="secondNumber" type="number" step="20"> =
    {{ result }}
    <p>
        <animated-integer v-bind:value="firstNumber"></animated-integer> +
        <animated-integer v-bind:value="secondNumber"></animated-integer> =
        <animated-integer v-bind:value="result"></animated-integer>
    </p>
</div>
<script>
    Vue.component('animated-integer', {
        template: '<span>{{ tweeningValue }}</span>',
        props: {
            value: {
                type: Number,
                required: true
            }
        },
        data: function () {
            return {
                tweeningValue: 0
            }
        },
        watch: {
            value: function (newValue, oldValue) {
                this.tween(oldValue, newValue)
            }
        },
        mounted: function () {
            this.tween(0, this.value)
        },
        methods: {
            tween: function (startValue, endValue) {
                var vm = this
                function animate () {
                    if (TWEEN.update()) {
                        requestAnimationFrame(animate)
                    }
                }

                new TWEEN.Tween({ tweeningValue: startValue })
                    .to({ tweeningValue: endValue }, 500)
                    .onUpdate(function () {
                        vm.tweeningValue = this.tweeningValue.toFixed(0)
                    })
                    .start()

                animate()
            }
        }
    })
    // 所有的复杂度都已经从 Vue 的主实例中移除！
    new Vue({
        el: '#example-8',
        data: {
            firstNumber: 20,
            secondNumber: 40
        },
        computed: {
            result: function () {
                return this.firstNumber + this.secondNumber
            }
        }
    })
</script>
</body>
</html>