vue入门 vue基础之简单使用1--vue的基本使用

最新推荐文章于 2023-06-27 17:29:38 发布

Ca_va

最新推荐文章于 2023-06-27 17:29:38 发布

阅读量296

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Ca_va/article/details/109214941

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

基础使用

完整代码在最后，完整代码1

引入vue国内静态镜像

在head中，使用script引入vue国内静态镜像
https://cdn.staticfile.org/vue/2.2.2/vue.min.js

新建一个id为app的div

    <div id="app">{{msg}}</div>

这里的msg是vue中data的数据，可以先不用管，看后面

新建一个Vue对象

在body体中，使用scritp新建一个Vue对象

 var vm=new Vue({
            //el可以使用id选择器/class选择器/dom对象，
            //不可以使用dom对象，不能尝试使用html以及body            
            el:"#app",//例如.app document.getelementbyid("#app")
            data:{
                msg:"hello world",
                count:1,
                arr:[1,2,3,4],
                obj:{name:"zengyu",age:1}
            },
            mounted(){
                //页面挂载完成后执行的方法（数据也加载完毕）
                //包括vue的装载 ，所以可以执行本vue的方法
                // console.log("页面加载完毕")
                //this.func1();

                //需要注意的是，在mounted内执行的函数的this为当前的vue对象，但是执行的回调函数则为window对象
                 console.log(this);                
                // func2(function(){
                //     console.log(this);
                // });

                // 但是如果执行委托时，用lambda表达式代替，对象则为当前的vue对象
                func2(()=>{
                    console.log(this);
                });
                //或者在外部使用that=this 将this赋值给that
                var that =this;
                func2(function(){
                    console.log(that);
                })

            },
            
            methods:{
                //定义函数;
                // 1.直接定义
                func1:function(){
                    console.log(this.msg);//此处this等同于vm
                },
                //2.使用委托  使用方法名  ES6
                func3(){
                    console.log(this.count);
                },
                //3.使用lambda表达式  ES6
                func4:()=>{

                }
            }
        });

        function func2(func){
            func();

        }
    </script>

el:表示该Vue绑定的对象

el可以使用id选择器/class选择器/dom对象，
不可以使用dom对象，不能尝试使用html以及body
例如.app document.getelementbyid("#app")

data表示定义的数据

数据都是json数据格式，即左边为key，右边为value

methods:表示定义在vue中的函数

定义函数的方式有

直接定义

	                func1:function(){
                    console.log(this.msg);//此处this等同于vm
                }

使用委托使用方法名(在ES6中定义) 最常用

                func3(){
                    console.log(this.count);
                }

使用lambda表达式 (在ES6定义)

                func4:()=>{

                }

mounted：页面挂载完成后执行的方法（此时数据也加载完毕）

包括vue的装载，所以可以执行本vue的方法

1.当直接执行console.log(this)时，this为当前的vue对象
但是如果执行回调函数内部执行console.log(this)是，this.为window对象

			//直接输出
              console.log(this);     
              //执行函数           
              func2(function(){
                     console.log(this);
              });

所以，当需要在执行的函数内部调用vue对象，一般会在函数外部执行
var that= this
然后再内部调用that

var that= this;
func2(){
console.log(that);

或者调用函数时，通过委托执行

				//委托执行
                func2(()=>{
                    console.log(this);
                });
				
				//

2.注意mounted本身是一个函数，写法与其他的不一致

mounted(){
///...code
}

3.不管是mounted还是methods，需要调用data数据时，都需要使用this.XXX
这里的this.XXX是一个简写，全称为this.$data.XXX

插值表达式的使用

在前面新建一个Id为app的div中，{{msg}}的写法就是插值表达式

{{}}内部只能使用js表达式(不能使用id，for等语句)，三元运算符，方法调用

		<!--vue对象的data数据-->
        <p>{{msg}}</p>
        <!--表达式-->
        <p>{{count>100}}</p>
        <!--三元运算符-->
        <p>{{count < 100?"大于":"小于"}}</p>
        <!--方法-->
        <p>{{func1()}}</p>

注意：

插值表达式不能写错，表达式写错了，是不会报错的，比如以下冒号写成了分号，整个div都不展示数据

<p>{{count < 100?"大于";"小于"}}</p>

调用方法需要加上双括号，不然只会显示方法的代码

<p>{{func1}}</p>

完整代码

完整代码1 --基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 国内镜像 -->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <title>入门</title>
</head>
<body>
    <div id="app">{{msg}}</div>
    <script>
        var vm=new Vue({
            //el可以使用id选择器/class选择器/dom对象，
            //不可以使用dom对象，不能尝试使用html以及body            
            el:"#app",//例如.app document.getelementbyid("#app")
            data:{
                msg:"hello world",
                count:1,
                arr:[1,2,3,4],
                obj:{name:"zengyu",age:1}
            },
            mounted(){
                //页面挂载完成后执行的方法（数据也加载完毕）
                //包括vue的装载 ，所以可以执行本vue的方法
                // console.log("页面加载完毕")
                //this.func1();

                //需要注意的是，在mounted内执行的函数的this为当前的vue对象，但是执行的回调函数则为window对象
                 console.log(this);                
                // func2(function(){
                //     console.log(this);
                // });

                // 但是如果执行委托时，用lambda表达式代替，对象则为当前的vue对象
                func2(()=>{
                    console.log(this);
                });
                //或者在外部使用that=this 将this赋值给that
                var that =this;
                func2(function(){
                    console.log(that);
                })

            },
            
            methods:{
                //定义函数;
                // 1.直接定义
                func1:function(){
                    console.log(this.msg);//此处this等同于vm
                },
                //2.使用委托  使用方法名  ES6
                func3(){
                    console.log(this.count);
                },
                //3.使用lambda表达式  ES6
                func4:()=>{

                }
            }
        });

        function func2(func){
            func();

        }
    </script>
</body>
</html>

完整代码2 --插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <title>插值表达式</title>
</head>
<body>
    <div id="app">
        <!-- 在插值表达式中 只能使用js表达式(不能使用if，for等语句)，三元运算符，方法调用 -->
        <p>{{msg}}</p>

        <p>{{msg}}</p>
        <p>{{count>100}}</p>
        <p>{{count==100}}</p>
        <p>{{count+10}}</p>
        <p>{{msg.split('|')}}</p>
        <p>{{count < 100?"大于":"小于"}}</p>
        <p>{{func1()}}</p>
        <!-- 值得一提的是，如果表达式写错了，是不会报错的，比如以下冒号写成了分号，整个div都不展示数据 -->
        <!-- <p>{{count < 100?"大于";"小于"}}</p> -->

        <!-- 调用方法时，如果没有括号，则显示的是整个方法的源代码 -->
        <p>{{func1}}</p>
    </div>


    <script>
        var vm= new Vue({
            el:"#app",
            data:{
                msg:"hello",
                count:1,
                arr:[1,23,4],
                obj:{
                    name:"zengyu",
                    age:14
                }
            },
            mounted(){
                console.log(this.msg);
            },
            methods:{
                func1(){
                    return "huanghuanghuanghuang";
                }
            }
        });        
    </script>
</body>
</html>

Ca_va

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue入门 vue基础之简单使用1--vue的基本使用

先看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <script src="https://cdn.staticfile.org/vue/2.2.
复制链接

扫一扫

专栏目录