Vue基础入门

最新推荐文章于 2022-04-09 16:15:37 发布

weixin_44271334

最新推荐文章于 2022-04-09 16:15:37 发布

阅读量115

点赞数

本文链接：https://blog.csdn.net/weixin_44271334/article/details/88958685

版权

Vue快速入门

一：Vue是什么？
1.Vue是一个渐进式的js框架，何为渐进式，即：学多少用多少，不需要全部学完才能使用，这可能也是为何它能如此火爆的原因吧。
2.Vue的特性
(1)轻量：Vue.js库的体积非常小的，并且不依赖其他基础库。
(2)数据绑定：对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
(3)指令：内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
(4)插件化：Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
(5)组件化：组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用，就是可以自定义标签

二：使用Vue
1.直接下载vue的js文件，然后在页面中进行引入

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.引入vue-->
    <script src="vue.min.js"></script>
</head>

2.准备div，进行挂载，创建vue对象，绑定工作台
下面代码最终效果会在页面上显示 — 猪八戒

 <!--2.创建一个div工作台-->
    <div id="qq">{{zq}}</div>

    <script>
        //3.创建vue对象，绑定工作台
        new Vue({
            el:"#qq",
            data:{
                zq:"猪八戒"
            }
        })
    </script>

在data属性中还可以使用对象

   <!--创建一个div工作台-->
    <div id="qq">{{zq}},{{user}},{{user.name}}</div>

    <script>
        //创建vue对象，绑定工作台
        new Vue({
            el:"#qq",
            data:{
                zq:"猪八戒",
                //还可以使用对象
                user:{
                    name:"天蓬",
                    age:888
                }
            }
        })

在vue中还可以定义方法，与data平级

	  		data:{
	                zq:"猪八戒",
	                //还可以使用对象
	                user:{
	                    name:"天蓬",
	                    age:888
	                }
	        },
	         //方法
            methods:{
                say:function(){
                    alert(123);
                    //可以将值直接返回到div标签中调用方法的地方
                    return this.user.name+"你好"
                }
            }
        });

调用方法，可以在div标签中调用，也可以直接在methods下面调用

<!--创建一个div工作台-->
    <div id="qq">
        {{zq}},{{user}},{{user.name}}
        <!--这里也可以调用方法-->
        {{say()}}
    </div>

同时因为vue用变量接收了，这样还可以在下面修改data属性中的值

 <script>
        //创建vue对象，绑定工作台
        var zbj = new Vue({
            el:"#qq",
            data:{
                zq:"猪八戒",
                //还可以使用对象
                user:{
                    name:"天蓬",
                    age:888
                }
            },
            //方法
            methods:{
                say:function(){
                    alert(123);
                    //可以将值直接返回到div标签中调用方法的地方
                    return this.user.name+"你好"
                }
            }
        });
        //调用方法
        // zbj.say();

        //可以修改值
        zbj.zq = "天蓬元帅"
    </script>

三：vue的表达式
1.算术运算

    <!--创建一个div工作台-->
    <div id="qq">
        <!--普通运算-->
        {{num1+num2}}==={{num1-num2}}==={{num1*num2}}==={{num1/num2}}
    </div>

    <script>
        //创建vue对象，绑定工作台
        var zbj = new Vue({
            el:"#qq",
            data:{
                num1:2,
                num2:6
            },
        });
    </script>

2.三木运算

    <!--创建一个div工作台-->
    <div id="qq">
        <!--三目运算-->
        {{ww?"正确":"错误"}}
    </div>

    <script>
        //创建vue对象，绑定工作台
        var zbj = new Vue({
            el:"#qq",
            data:{
                ww:true
            }
        });
    </script>

3.字符串操作

  <!--创建一个div工作台-->
    <div id="qq">
        <!--字符串-->
        {{str}}==={{str.substring(2)}}==={{str.toUpperCase()}}
    </div>
    
    <script>
        //创建vue对象，绑定工作台
        var zbj = new Vue({
            el:"#qq",
            data:{
                str:"youaremine"
            }
        });
    </script>

4.对象操作

<!--创建一个div工作台-->
    <div id="qq">
        <!--对象操作-->
        {{user}}==={{user.name}}==={{user.eat()}}
    </div>

    <script>
        //模拟从数据库读取出的数据
        var user = {
            name:"明凯",
            age:26,
            eat:function(){
                return "吃饭啦";
            }
        };

        //创建vue对象，绑定工作台
        var zbj = new Vue({
            el:"#qq",
            data:{
                user:user
            }
        });
    </script>

四：vue的指令，其实也就是一些特殊属性
1.v-text 和 v-html指令，两者都是显示文本内容，但是html指令可以解析标签

<!--创建一个div工作台-->
    <div id="qq">
        <!--
            v-text指令：显示数据，并且覆盖原数据
            v-html指令：显示数据，并且覆盖原数据，但是还会解析标签
        -->
        <span v-text="zbj">竖起约定之花</span>      <!--这里显示的内容是<h1>朝花夕拾</h1>-->
        <span v-html="zbj">竖起约定之花</span>      <!--这里显示的内容是<h1>样式的-->
    </div>

    <script>

        //创建vue对象，绑定工作台
        var zbj = new Vue({
            el:"#qq",
            data:{
                zbj:"<h1>朝花夕拾</h1>"
            }

        });
    </script>

2.v-for指令，这就是循环指令，可以循环数组，num数字,对象，字符串

<!--创建一个div工作台-->
    <div id="qq">
        <!--
            v-for:循环,可以循环数组，num,对象，字符串
        -->
        <!--数组-->
        <ul>
            <li v-for="(v,i) in hobbys">{{v}}==={{i}}</li>   <!-- v:值，i:下标-->
        </ul>
        <hr/>
        <!--对象-->
        <ul>
            <li v-for="(v,k，i) in user">{{v}}==={{i}}==={{k}}</li>    <!-- v:值 ，k:属性，i:下标-->
        </ul>
        <hr/>
        <!--num-->
        <ul>
            <li v-for="(v,i) in num">{{v}}==={{i}}</li>   <!-- v:值，i:下标-->
        </ul>
        <hr/>
        <!--字符串-->
        <ul>
            <li v-for="(v,i) in str">{{v}}==={{i}}</li>    <!-- v:值，i:下标-->
        </ul>
    </div>

    <script>
        //创建vue对象，绑定工作台
        var zbj = new Vue({
            el:"#qq",
            data:{
                hobbys:["qq","ww","ee"],
                user:{
                    name:"zbj",
                    age:12,
                    id:1
                },
                num:6,
                str:"zzzbbbjjj"
            }
        });
    </script>

3.v-show 和 v-if
v-show：只是单纯的显示隐藏指令

<!--  v-show  ,值为true是，显示内容，为false时隐藏-->
    <div id="qq" v-show="false">
        红A
    </div>

v-if:是判断指令，也带有显示隐藏功能，但是v-if如果是false的话，不是隐藏，而是这个元素就不会存在

  <!--  v-if  ,值为true时，显示，为false时,这个这个元素根本就不存在-->
    <div id="qq" v-if="msg">
        <span style="color: aqua">红A</span>
    </div>

    <script>
        //创建vue对象，绑定工作台
        var zbj = new Vue({
            el:"#qq",
            data:{
                msg:false
            }
        });
    </script>

4.v-bind,将data中的属性绑定到标签上，作为标签的属性

 <!--创建一个div工作台-->
    <!--  v-bind   为属性绑定值-->
    <div id="qq">
        <img v-bind:src="src" v-bind:alt="name">
        <hr/>
        <img :src="src" :alt="name"><!--简写-->
        <hr/>
        <img v-bind="img"><!--为对象属性绑定值-->
    </div>

    <script>
        //创建vue对象，绑定工作台
        var zbj = new Vue({
            el:"#qq",
            data:{
                src:"",
                name:"R姐",
                img:{
                    src:"",
                    alt:"红A"
                }
            }
        });
    </script>

5.v-model，双向绑定
vue是MVVM模式的，在VM中有一个监听器，不论是M的值发生变化，还是V的值发生变化，另一个值都会跟着变化

<!--创建一个div工作台-->
    <!--  v-model 双向绑定 只能用在input，select，textarea-->
    <div id="qq">
        <input type="text" v-model="text">{{text}}     <!--这里的两个text的值会同时发生变化-->
    </div>

    <script>
        //创建vue对象，绑定工作台
        var zbj = new Vue({
            el:"#qq",
            data:{
               text:"qwer"
            }
        });
    </script>

6.v-on,注册事件的指令

 <!--创建一个div工作台-->
    <!--  v-on 事件绑定-->
    <div id="qq">
        <button v-on:click="eat()" >点击</button>
    </div>

    <script>
        //创建vue对象，绑定工作台
        var zbj = new Vue({
            el:"#qq",
            data:{
            },
            methods:{
                eat:function(){
                    alert(666)
                }
            }
        });
    </script>

五：组件—即自定义标签
组件的语法
全局组件:
Component:组件;
Vue.component(“组件名字”,”组件的配置”)
局部组件:
在vue对象上:
components:{
组件名字:{组件的配置},
组件名字:{组件的配置},
}

1.自定义全局组件—在所有被vue挂载的地方都能使用

 <!--创建一个div工作台-->
    <div id="qq">
        <myqwer></myqwer>
    </div>

    <div id="qqww">
        <myqwer></myqwer>
    </div>

    <script>
        //创建全局自定义标签---所有被挂载的地方都能被使用
        Vue.component("myqwer",{
            //模板
            template:"<h1>全局自定义模板</h1>"
        });

        //创建vue对象，绑定工作台
        var zbj = new Vue({
            el:"#qq",
            data:{
            }

        });
        var zr = new Vue({
            el:"#qqww",
            data:{
            }
        })
    </script>

2.自定义局部组件—只能在当前被挂载的标签中使用

<div id="ee">
        <zzbbjj></zzbbjj>
    </div>

    <script>
        var zz = new Vue({
            el:"#ee",
            data:{
            },
            //创建局部自定义标签---只能在这个被挂载的标签中使用
            components:{
                zzbbjj:{
                    template:"<h1>局部自定义标签</h1>"
                }
            }
        });
    </script>

六：vue的细节
1.要先定义组件，在进行vue的挂载
2.模板中必须要有一个根标签
3.如果要使用驼峰命名法，如myTag—>那么在使用时大写变小写，且在原来大写地方前面加上中横线加上，如

weixin_44271334

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础入门

Vue快速入门一：Vue是什么？1.Vue是一个渐进式的js框架，何为渐进式，即：学多少用多少，不需要全部学完才能使用，这可能也是为何它能如此火爆的原因吧。2.Vue的特性(1)轻量：Vue.js库的体积非常小的，并且不依赖其他基础库。(2)数据绑定：对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。(3)指令：内置指令统一为(v—*)，也可以自定义指令，通过对应表达值...
复制链接

扫一扫