Vue基础

最新推荐文章于 2024-11-01 14:29:13 发布

hello..world

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量334

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_74730282/article/details/137043704

版权

本文详细介绍了如何使用VueCLI创建不同版本的项目，包括vue-cli2和vue-cli3的安装，以及Vue实例的创建。内容涵盖Vue的插值表达式、指令（如v-text、v-html、事件绑定），数据双向绑定（v-model）和自定义指令。还介绍了如何使用axios进行HTTP请求，包括GET和POST操作。

摘要由CSDN通过智能技术生成

vue创建项目

vue创建项目不同的版本有不同的格式

npm install -g vue-cli      vue-cli2
npm install -g @vue/cli     vue-cli3

vue实例创建

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

下面我创建了一个vue实例代码

<html>
    <div id="app"/>
</html>
<script>
    var app = new Vue({
        el: '#app', //id选择器
        data:{
            msg:"Hello world"
        },
        methods:{
            show:function(){
                alert(this.msg)
            }
        }
    })
</script>

vue的插值表达式

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

Vue指令

在将这些指令之前, 我想说, 在""(双引号)中, 他并不是看似的字符串,而是一个语句表达式,想要输出字符串使用''(单引号)

v-text

v-text将里面的数据解释为普通文本,这里举两个例子

<h2 v-text="msg"></h2> 输出内容为Hello world

<div id="app">
    <h2 v-text= "'今天是'+ year +'年'"></h2>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data:{
            year:"2024"
        }
    })
</script>

今天是2024年

v-html

v-html 如果内容是普通文本, 解释出来也是普通文本,如果是html, 那么解释出来的就是html

为元素绑定事件

点击事件

<div id="app">
     <input type="button" value="button" v-on:click="v_on"></input>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            
        },
        methods:{
            v_on:function(){
                alert("click事件")
            }
        }
    })
</script>

鼠标移动事件

<div id="app">
     <input type="button" value="button" v-on:mouseenter="v_enter"></input>
</div>

双击事件

<div id="app">
     <input type="button" value="button" v-on:dbclick="v_dbclick"></input>
</div>

简写

除了使用v-on:xxx,也可以使用@xxx达到相同的效果

<div id="app">
     <input type="button" value="button" @dbclick="v_dbclick"></input>
</div>

条件判断

v-show

v-show可以通过表达式来判断是否展示相应的代码块

<div id="app">
    <input type="button" value="切换" @click="show"><br>
    <span v-show="flag">Hello World!</span>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            show:function () {
                this.flag=!this.flag
            }
        }
    })
</script>

v-if

v-if也是通过表达式来判断是否展示相应代码块

<div id="app">
    <input type="button" value="切换" @click="show"><br>
    <span v-if="flag">Hello World!</span>
</div>

和v-show不同的是v-if在F12的情况下代码是动态加载的,如果v-if为真, 那么代码存在于F12中

设置元素的属性

v-bin:xxx v-bin可以动态修改元素标签的属性值

<div id="app">
    <img v-bin:src="url"></span>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            url:"E://xxx.png"
        }
    })
</script>

简写

v-bin也是可以像v-on简写, v-bin可直接将v-bin省略只留下冒号

<div id="app">
    <img :src="url"></span>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            url:"E://xxx.png"
        }
    })
</script>

列表显示

v-for, 里面有两个参数, 第一个参数为数组中的每一项, index是当前项的索引, 下标从0开始

<div id="app">
    <h2 v-for="(item,index) in str" v-bind:title="item.name">
        第{{index}}位是{{item.name}}
    </h2>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            str:[
                {name:"1"},
                {name:"2"},
                {name:"3"},
            ]
        }
    })
</script>

数据双向绑定

v-model: v-model可以实现数据的双向绑定, 通过输入框中输入的内容可以改变msg的值, v-model看起来也只是一个vue标记而已,为什么输入框中的值改变, msg也跟着改变, v-model全称为v-model:value, 通过输入框改变value的值,从而msg的值也发生变化

<div id="app">
  <input type="text" v-model="msg"><br>
  {{msg}}
</div>

自定义指令

之前我们使用的是vue提供的指令集, 但是有些时候这些指令是无法满足我们的需求, 我们可以自己定义指令来满足我们的要求,根据指令范围,自定义指令有两种, 意识注册全局指令, 二是注册局部指令

注册全局指令

第一个参数是自定义指令的名字, 第二个是对象相关数据

el: 指令所绑定的元素, 是一个普通的dom元素, 使用效果和document.getElementById("id")的出来的对象相同
binding : 一个对象, 包含一下属性
- name: 指令名称, 也就是你的"my-directive", 不包括"v-"前缀
- value: 指令绑定的值, 比如 v-my-directive = "1+1"中, 绑定值为2
- express: 用字符串表达指令表达式比如v-my-directive = "1+1"中, 表达式为"1+1"
- arg: 传递给指令的参数比如v-my-directive:foo

Vue.directive('my-directive', function(el, binding){
    el.innerHTML = binding.value.toUpperCase()
})

注册局部指令

directives : {
	'my-directive' : {
		bind (el, binding) {
			el.innerHTML = binding.value.toupperCase()
		}
	}
}

axios

引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

get请求和post请求

axios.get("https://autumnfish.cn/api/joke/list?num=3")
.then(function (response) {
      console.log(response)
  },function (error) {
      console.log(error)
})

axios.post("https://autumnfish.cn/api/user/reg",{username:"jack"})
.then(function (response) {
       console.log(response)
   },function (error) {
       console.log(error)
})