VueJS入门使用

最新推荐文章于 2023-04-14 11:09:48 发布

Oscrazy

最新推荐文章于 2023-04-14 11:09:48 发布

阅读量415

点赞数

分类专栏： VueJs 前端文章标签： VueJs 前端

本文链接：https://blog.csdn.net/Oscrazy/article/details/90231261

版权

VueJs 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

简单使用

导入vue.js依赖文件

<script src="/js/vue.js"></script>

VueJS对象的结构

在这里插入图片描述

语法格式

<body>
    <!-- 正确写法{{数据键名}} -->
    <!-- 会在Vue()中的data里取 -->
    {{param1}} --> test1
    {{param2+2}} --> 4
    {{param2 == 3 ? 'yes' : 'no'}} --> yes
    ...
    <!-- 错误写法,不存在if语句写法 -->
    {{
        if(num==10){
        	return '是'
       	}else{
         	return '否'
       	}
    }}
</body>

简单使用

新建html文件 *.html

<html><head>
    <title>VueJs入门</title>
    <script src="js/vue.js"></script>
</head>
<body>

<!-- div就是  View -->
<div id="app">
    {{message}}
</div>

<script>
    // Vue对象  ViewModel
    new Vue({
        el: '#app',  // el: 绑定某个id的视图,
        data:{    // data对象就是  Model
            message: 'VueJS入门程序'
        }
    })
</script>
</body></html>

调用方法

new Vue({
    el: '#app',  
    data:{
        message: 'VueJS入门程序'
    },
    methods:{
    	fun1:function(){
            
        },
        fun2:function(){
            //加上this直接调用即可
            this.fun1();
            var _this = this;
            axios.post(url,this.message).then(function (resp) {
                //异步请求里通过外层接收vue对象实现
                _this.fun1();
            });
        },
	}
});

VueJS指令

括号里的为指令的简写

指令	作用
v-on:click(@click)	点击时执行指定函数
v-on:keydown(@keydown)	键盘有按键敲下时执行指定函数
v-on:mouseover(@mouseover)	鼠标移动到时执行指定函数
v-on:xxx.事件修饰符(@xxx.事件修饰符)	指令后缀来调用事件修饰符
v-on:xxx.按键修饰符(@xxx.按键修饰符)	指令后缀来调用按键修饰符
v-bind( : )	单向绑定数据
v-model	双向绑定数据
v-for	循环集合
v-if / v-show	判断是否显示

@click

<button v-on:click="fun1('小苍')">点我</button>
<button @click="fun1('小泽')">点我</button>

new Vue({
    el: '#app',
    methods:{
        fun1:function(name){
            alert("点击了"+name)
        }
    }
});

@keydown

<input type="text" v-on:keydown="fun2($event)">
<input type="text" @keydown="fun2($event)">

new Vue({
    el: '#app',
    methods:{
        fun2:function(e){
            //获取输入的键
            var keyCode = e.keyCode
            //判断不是数字
            if( keyCode<48 || keyCode>57 ){
                //阻止事件默认行为,不让输入框回显输入的内容
                e.preventDefault()
            }
        }
    }
});

@mouseover

<div id="app">
   <div style="background-color: pink" @mouseover="fun3">
       这是一个div
       <textarea cols="20" rows="3" @mouseover="fun4($event)">textarea</textarea>
   </div>
</div>

new Vue({
    el: '#app',
    methods:{
        fun3:function(){
            alert("经过div")
        },
        fun4:function(e){
            alert("经过textarea")
            //阻止事件冒泡,area在div里,经过textarea屏蔽div的经过的方法
            e.stopPropagation()
        }
    }
});

@xxx.事件修饰符

后缀修饰符等价于调用的方法($event) 作用
@xxx.stop e.stopPropagation() 阻止事件冒泡
@xxx.prevent e.preevetDefault() 阻止事件默认行为

后缀修饰符	等价于调用的方法($event)	作用
@xxx.stop	e.stopPropagation()	阻止事件冒泡
@xxx.prevent	e.preevetDefault()	阻止事件默认行为

<!-- 没有使用事件修饰符  会跳转到百度和执行fun1-->
<div style="background-color: red" @click="fun1">
    <a href="http://www.baidu.com">点我</a>
</div>

<!-- 使用事件修饰符  .stop 不会跳转到百度 -->
<div style="background-color: red" @click="fun1">
    <a href="http://www.baidu.com" @click.stop >点我</a>
</div>

@xxx.按键修饰符

后缀修饰符代表的按键
@xxx.enter Enter
@xxx.tab Tab
@xxx.delete Delete和Backspace
@xxx.esc Esc
@xxx.space 空格键
@xxx.up/.down/.right/.left 方向键
@xxx.ctrl Ctrl
@xxx.alt Alt
@xxx.shift Shitf

后缀修饰符	代表的按键
@xxx.enter	Enter
@xxx.tab	Tab
@xxx.delete	Delete和Backspace
@xxx.esc	Esc
@xxx.space	空格键
@xxx.up/.down/.right/.left	方向键
@xxx.ctrl	Ctrl
@xxx.alt	Alt
@xxx.shift	Shitf

<input type="button" value="登录" @keydown.enter="login">
<!--多个键的时候在后面加.分割即可-->
<input type="button" value="登录" @keydown.enter.spcae="login">

new Vue({
    el: '#app',
    methods:{
        login:function(){
            alert("登录")
        },
    }
});

v-text与v-html

v-text输出：<span v-text="message"></span>  ---> <h1>HelloWorld</h1>
v-html输出：<span v-html="message"></span>  ---> HelloWorld

 new Vue({
     el: '#app',
     data:{
         message: '<h1>HelloWorld</h1>'
     },
 })

:xxx (单项绑定数据)

属性采用字符串拼接方式

<span v-bind:style="'color: '+color">小苍</span>
<span :style="'color: '+color">小苍</span>

new Vue({
    el: '#app',
    data:{
        color: 'red'
    }
})

v-model (双向绑定数据)

<input type="text" v-model="param1">
{{param1}}
<input type="text" v-model="param1">

new Vue({
    el: '#app',
    data:{
        //必须声明键名,v-model才能用
        param1: '1'
    }
});

v-for

<!-- 无索引值 -->
<li v-for="city in citys">{{city}}</li>
<!-- 有索引值 -->
<li v-for="(city,index) in citys">{{city}}======={{index}}</li>

new Vue({
    el: '#app',
    data:{
        citys:['北京','广州','深圳']
    }
})

v-if / v-show

v-if : 为false时不会加载 , 可以配合v-else(不需要加条件)使用

v-show : 为false时会加载,属性加display:none被隐藏

<img src="imgs/mm.jpg" v-show="flag">
<img src="imgs/mm.jpg" v-if="flag">

<!-- 登录前和登录后效果 -->
<div v-if="flag">
    你好，张三 <a href="http://www.baidu.com">【退出登录】</a>
</div>
<div v-else>
    你好，请登录 <a href="http://www.baidu.com">【免费注册】</a>
</div>

new Vue({
    el: '#app',
    data:{
        flag:'false'
    }
})

VueJs的生命周期

生命周期状态	对应方法	作用
beforeCreate	created	一开始会执行
beforeMount	mounted	加载完成时执行
beforeUpdate	updated	模型有数据时更新
beforeDestroy	destroyed	模型和实体处于绑定状态模型和实体处于解绑状态

axios异步请求

带参数的请求get和post的区别

get : 需要加{params:{xxx:xxx}}

post不需要,直接使用{xxx:xxx}

get请求

axios.get('/user?ID=12345')
  .then(function (response) {
	//正常时执行(try)
  })
  .catch(function (error) {
    //错误时执行(catch)
  })
  .then(function () {
    //始终执行(finally)
  });

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then...

post请求

axios.post('/user', {
    id: 234551,
    name: 'osc'
  })
  .then(function (response) {
	//正常时执行(try)
  })
  .catch(function (error) {
    //错误时执行(catch)
  })
  .then(function () {
    //始终执行(finally)
  });

使用案例

new Vue({
    el: '#app',
    data:{
        userList:[]
    }
    methods:{
        //加载所有用户数据
        findAll:function () {
            //请求后台获取数据
            var url = 'http://localhost:8080/vuejsDemo/user/findAll.do';
            //先把外面的this存起来,axios里用this不是Vue对象
            var _this = this;
            axios.get(url).then(function (resp) {
                //把返回的数据赋值给模型
                _this.userList = resp.data;
            })
        }
    }
});