vue基础示例

最新推荐文章于 2023-11-30 11:40:15 发布

urbunt

最新推荐文章于 2023-11-30 11:40:15 发布

阅读量153

点赞数

分类专栏： vue

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

版权

vue 专栏收录该内容

1 篇文章 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">
        
        <input type="text" v-model="message">
        <span>你输入的是：{{message}}</span>
        <br>
        
        <label><input type="radio" value="male" v-model="gender">男</label>
        <label><input type="radio" value="female" v-model="gender">女</label>
        <p>{{message}}</p>
        
        <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 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。

全局指令用法：

局部自定义指令：

    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>

urbunt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础示例

按照传统，首先输出hello world.1.数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> <scr...
复制链接

扫一扫

专栏目录