vue的入门(附带测试源码)

最新推荐文章于 2023-05-14 23:05:21 发布

清水l

最新推荐文章于 2023-05-14 23:05:21 发布

阅读量457

点赞数

分类专栏： Vue 文章标签： Vue入门前端框架 Vue Javascript

本文链接：https://blog.csdn.net/shenkeding9350/article/details/86232922

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

建议配合演示源码进行观看

源码下载
码字不易,望赞表挺.

Vue 的第一个实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的基本代码 </title>
    <script src="../lib/Vue2.5.21.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data:{
                msg:"你好世界!"
            }
        })
    </script>
</body>
</html>

基本使用

导入Vue文件
创建Vue实例
Vue的el属性关联要控制的区域
接下来可以做渲染,等等之类的操作

V-cloak

在网速慢的环境下,插值表达式会显示为{{}}

v-cloak能够解决插值表达式的闪烁问题

<div id="app">
        <p v-cloak>{{msg}}</p>
    </div>

 <style>
        [v-cloak]{
            display: none;
        }
    </style>

v-text,v-html和插值表达式

三者都是用来渲染文本

<div id="app">
    	<p>+++++++{{msg}}++++++</p>
        <p v-text='msg1'></p>
   		<p v-html='msg2'></p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data:{
                msg:"你好世界!",
                msg1:"你好世界!",
                msg2:"<b>你好世界!</b>",
            }
        })
    </script>

v-text和插值表达式的区别:

默认v-text是没有闪烁问题的
v-text会把元素内的内容覆盖,插值表达式只会替换自己的占位符
v-text和{{}}会把内容当作普通文本来渲染,v-html会作为htm来渲染

v-bind

专门用来绑定属性的指令

注意

v-bind 可以简写为一个冒号
v-bind中可以写合法的js表达式

<div id="app">
    	<!--会把msg当作一个变量来解析-->
    	<a v-bind:herf='msg'></a>
    	<!--可以简写为一个:-->
		<a :herf='msg'></a>
    </div>

    <script>
        new Vue({
            el: '#app',
            data:{
                msg:"你好世界!",
            }
        })
    </script>

v-on

作用

vue中提供的事件绑定机制

基本使用

<div id="app">
   <!--vue中提供了v-on事件绑定机制-->
    <button v-on:click="show">按钮</button>
    <!--也可以简写为@事件名-->
	<button @click="show">按钮</button>
</div>

<script>
    new Vue({
        el: '#app',
        data:{
            link: "http://www.baidu.com/"
        },
        //methods 中定义了当前vue实例中所有可用的方法
        methods:{
            show:function () {
                alert(1);
            }
        }
    })
</script>

配合事件修饰符使用

共有五个

stop-----阻止冒泡
capture-----开启事件捕获
self-----只有点击自身的时候才会触发事件
once-----事件有效期只有一次
prevent-----阻止默认行为

<div class="inner" @click="divClick">
        <button @click.stop="btnClick">点击我</button>
    </div>

v-model

作用

主要用于表单元素和vm实例数据的双向绑定 只能用于表单元素

与V-bind的不同

只能实现数据的单向绑定,从m绑定到v,无法实现数据的双向绑定

基本使用

 <div id="app">
        <h4>{{msg}}</h4>
        <input type="text" v-model="msg">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data:{
                msg:"测试文本"
            },
            methods:{

            }
        })
    </script>

Vue绑定类

可以通过四种方式来进行属性绑定

数组形式
三元表达式
数组嵌套对象
直接使用对象的方式

<div id="app">
    <!--//使用v-bind绑定属性-->
    <!--One:通过数组的形式绑定-->
    <h1 :class="['thin','italic']">测试文本</h1>

    <!--Two:在数组中使用三元表达式-->
    <h1 :class="['thin','italic',flag?'active':'']">测试文本</h1>

    <!--Three:在数组中添加对象-->
    <h1 :class="['thin','italic',{'red':flag}]">测试文本</h1>

    <!--Four使用对象来添加类,-->
    <h1 :class="classObj">测试文本</h1>

</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            flag: true,
            classObj: {red: true, thin: true, italic: false, active: false}
        },
        methods: {}
    })
</script>

Vue绑定样式

给style绑定对象
把对象抽离到data中
通过数组绑定多个对象

    <!--直接给style绑定一个对象-->
    <h1 :style="{color:'red','font-size':'40px'}">测试文本</h1>

    <!--把对象抽离到data中-->
    <h1 :style="styleObj">测试文本</h1>

    <!--可以通过数组为此元素绑定多个对象-->
    <h1 :style="[styleObj,styleObj2]">测试文本</h1>

</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            styleObj: {color: 'red', 'font-size': '40px'},
            styleObj2: {fontWeight:200}
        },
        methods: {}
    })

V-for的使用

四种用法

遍历普通数组
遍历对象数组
遍历对象的属性
迭代数字

 <div id="app">
        <!--v-for循环普通数组-->
        <!--<p v-for="(item,i) in list">元素:{{item}}&#45;&#45;&#45;&#45;&#45;&#45;索引:{{i}}</p>-->

        <!--v-for循环对象数组-->
        <!--<p v-for="(item,i) in listObj" :key="i">ID:{{item.id}}-&#45;&#45;&#45;&#45;NAME:{{item.name}}</p>-->

        <!--v-for循环对象!!!!在遍历对象身上的键值对的时候,除了val,key第三个位置还有一个索引-->
        <!--<p v-for="(val,key,i) in obj">{{val}}-&#45;&#45;&#45;&#45;{{key}}&#45;&#45;&#45;&#45;{{i}}</p>-->

        <!--v-for迭代数字-->
        <!--<p v-for=" i in 5">这是第{{i}}次循环</p>-->
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data:{
                list:[1,2,3,4,6,8],//普通数组
                listObj:[
                    {id:1, name: 'zz1'},
                    {id:2, name: 'zz2'},
                    {id:3, name: 'zz3'},
                    {id:4, name: 'zz4'},
                ],
                obj:{
                    id: 1,
                    name: "你的托尼老师",
                    gender: "男"
                }
            },
            methods:{

            }
        })
    </script>

注意:key的使用

:key是确保元素唯一性,在新版本中必要添加 key的属性只能使用num/string

V-if和V-show的使用

作用:

都是用来显示和隐藏元素的

区别:

v-if:会对元素进行删除和创建, 有较高的切换性能消耗

v-show:会对元素进行display属性的切换,有较高的初始渲染消耗

使用建议

如果元素涉及到频繁的切换,最好不要使用v-if

如果元素可能永远不会被显示出来,则推荐使用v-if

演示

    <div id="app">
        <input type="button" @click="toggle" value="toggle">
        <!--v-if每次都会重新删除或创建元素-->
        <h3 v-if="flag">v-if控制的元素</h3>
        <!--v-show每次不会重新进行dom的删除和创建操作,只是切换了元素的display:none样式-->
        <h3 v-show="flag">v-show控制的元素</h3>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data:{
                flag: true
            },
            methods:{
                toggle() {
                    this.flag = !this.flag;
                }
            }
        })
    </script>

Vue中的过滤器

作用:

一般用来格式化文本,可以作用在差值表达式(mustachc)和v-bind表达式’’

私有过滤器:

绑定在vue实例上的过滤器,只能作用于本实例.

如果出现私有过滤器和全局过滤器同名,优先使用私有过滤器

全局过滤器

绑定在Vue对象上,可以作用于任意一个实例

全局过滤器演示:

<div id="app">
        <!--过滤器使用的方式,支持多次调用-->
        {{ date | dateFormat()}}
    </div>
    <script>

        // 全局过滤器的定义
        //过滤器中的function,第一个参数已经被规定死了,永远都是过滤器管道符前面传递过来的数据
        //这是自定义了一个格式化日期的过滤器
        Vue.filter("dateFormat",function (data,pattern='') {
            var dt = new Date(data);
            var y = dt.getFullYear();
            var m = dt.getMonth()+1;
            var d = dt.getDate();

            if (pattern.toLowerCase() === "yyyy-mm-dd") {
                return `${y}-${m}-${d}`;
            } else {
                var hh = dt.getHours();
                var mm = dt.getMinutes();
                var ss = dt.getSeconds();
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
            }
        })

        var vm = new Vue({
            el: "#app",
            data:{
                date: new Date(),
            },
            methods:{

            }
        })
    </script>

局部过滤器演示:

<div id="app">
    <!--过滤器使用的方式,支持多次调用-->
    {{ date | dateFormat()}}
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            date: new Date(),
        },
        methods:{

        },
        // 局部过滤器的定义
        //过滤器中的function,第一个参数已经被规定死了,永远都是过滤器管道符前面传递过来的数据
        //这是自定义了一个格式化日期的过滤器
        //如果出现私有过滤器和全局过滤器同名,优先使用私有过滤器
        filters:{
            dateFormat(data,pattern="") {
                var dt = new Date(data);
                var y = dt.getFullYear();
                var m = dt.getMonth()+1;
                var d = dt.getDate();

                if (pattern.toLowerCase() === "yyyy-mm-dd") {
                    return `${y}-${m}-${d}`;
                } else {
                    var hh = dt.getHours();
                    var mm = dt.getMinutes();
                    var ss = dt.getSeconds();
                    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
                }
            }
        }
    })
</script>

自定义按键修饰符

使用方法

@keyup.enter="事件处理函数"

配置别名

例如@keyup.nickname

Vue.config.keyCodes.nickname =13

上面的13代表的是按键所对应的ascii码

Vue自定义指令

作用:

在某些情况下,vue内置的指令并不能很好的满足我们的需求,这时候我们就需要来自定义指令了.

全局指令和局部指令的区别:

全局指令可以作用于本页面的所有Vue实例.

局部指令只能作用于当前vue实例

自定义指令演示

  <div id="app">
        <!--在此处使用自定义指令-->
        <!--简单的vue定义指令-->
        <input type="text" id="test" v-focus>
        <h3 v-fsize="60">第二个指令</h3>
    </div>
    <script>
        // 自定义全局指令
        //其中第一个参数是指令的名称,注意在定义的时候,指令的名称前面,不需要加v-前缀,在调用的时候,必须在指令名称前加v-前缀来调用
        //参数2是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作.
        Vue.directive("focus",{
            //第一个参数是被绑定的元素
            bind: function (el) {//当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次

            },
        inserted:function (el) {//insert表示元素插入到dom中的时候,会执行inserted函数,只执行一次
            el.focus();
        },
            updated:function () {//当vNode更新的时候,会执行updated,可能触发多次

            }
        })

        var vm = new Vue({
            el: "#app",
            data:{
                
            },
            methods:{

            },
            directives:{
                "fsize":{
                    inserted:function (el, binding) {
                        el.style.fontSize = binding.value + "px";
                    }
                }
            }
        })
    </script>

函数的简写

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写:

Vue.directive(‘color-swatch’, function (el, binding) {
el.style.backgroundColor = binding.value
})

未完待续…

清水l

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue的入门(附带测试源码)

建议配合演示源码进行观看源码下载Vue 的第一个实例&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Vue
复制链接

扫一扫

专栏目录