Vue学习--入门篇

Vue.js入门教程：基础语法与实战解析

最新推荐文章于 2024-11-14 23:16:50 发布

原创最新推荐文章于 2024-11-14 23:16:50 发布 · 653 阅读

5 ·

CC 4.0 BY-SA版权

此博客为个人博客，不涉及商业用途，仅提供学习参考，内容均来自个人原创以及互联网转载和摘录和。如需转载请注明出处。若有问题，欢迎指正。

文章标签：

#vue.js #javascript #前端

Vue学习–入门篇

一、什么是Vue

官方介绍：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue能做的事情JQuery都可以做，但是Vue做起来更方便

二、通过vue来显示HelloWord

第一步：引入vue.js 的CDN地址

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

第二步创建DOM和Vue实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>

    <div id="app">{{message}}</div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
    	  var app = new Vue({
              el: "#app",
              data: {
                  message: "helloWord"
              }
          })
    </script>
     
  </body>
</html>

以我的理解来说一下流程：首先写个DOM标签，标上id，然后就是写对应的vue实例，el关键字类似选择器的作用，用来定位dom元素，data中数据以键值对的形式存储。

显示

在这里插入图片描述

三、Vue使用的一些基础语法

数据绑定

<div id="app">{{message}}</div>
<script>
var app = new Vue({
	el: "#app",
	data: {
		message: "hello world!"
	}
});
</script>

vue框架的数据流向是单向的，DOM标签中通过{{}}，来获取vue实例中的数据，双大括号的语法叫做mustache 语法，大括号里面的是作为变量形式出现的，data中的数据是以键值对的形式存在的，各个数据之间逗号分隔

属性绑定

<div id="app-2" v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
</div>
<script>
    var app2 = new Vue({
        el: "#app-2",
        data: {
            message: "你瞅啥！"
        }
    });
</script>

在这里插入图片描述

v-bind: 可以用来绑定dom元素的HTML属性，比如：绑定hidden属性，disabled属性，style属性, color属性，凡是标签有的属性，都可以通过这个方法进行绑定，“v-bind:” 可以缩写为 “:”

事件绑定

<button id="btn-01" v-on:click="click">点我</button>

<script>
    var btn01 = new Vue({
        el: "#btn-01",
        data: {},
        methods: {
            click: function(){
                alert("再点我一下试试！");
            }
        }
    });
</script>

v-on: 可以给dom元素绑定事件，需要在vue实例中添加methods字段,v-on:可以缩写为@，v-on:click=“fun()” === @click=“fun()”

数据反向传输

上面为止，我们遇到的都是数据的单向传递，即数据从vue实例传到DOM元素，那么我们可不可以从DOM中获取数据然后保存在vue实例的data中呢，答案是肯定的。

先上演示

<div id="from">
    数据源：<input type="text" v-model="Mes"/><br />
    同步更新：<span>{{Mes}}</span>
</div>

<script>
    var Text_From = new Vue({
        el: "#from",
        data: {
            Mes: ""
        }
    })

</script>

这里我们使用了 v-model,v-model可以将表单输入绑定到对应的模型数据，v-model还可以获取所在标签的check,select等值

<form id="menu">
    性别：
    <input type="radio" name="sex" value="男" v-model="message01">男
    <input type="radio" name="sex" value="女" v-model="message01">女
    显示选中：<span>{{message01}}</span>
</form>

<script>
    var menu = new Vue({
        el: "#menu",
        data: {
            message01: ""
        }
    })
</script>

在这里插入图片描述

条件（if与else）

<div id="app">
    <p v-if="seen">我觉得自己可以显示出来</p>
    <p v-if="notseen">我就不会显示出来呗</p>
    <p v-else="notseen">既然else了，那我就出来呗</p>
</div>

<script>
    var app = new Vue({
        el: "#app", 
        data: {
            seen: true,
            notseen: false
        }, 
        methods: {}
    })

</script>

循环（for）

<div id="app02">
    <p v-for="i in array">{{i}}</p>
</div>

<script>
    var app02 = new Vue({
        el: "#app02",
        data: {
            array: {
                name: "zjx",
                age: 21,
                gender: "男"
            }
        },
        methods: {}
    })
</script>

组件

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例

先来个简单示例：

<div id="app02">
    <my_p></my_p>
</div>

<script>
	// 第一步创建组件
    Vue.component("my_p", {
        template: '<p>我生成用到了组件</p>'
    })
    // 第二步创建Vue实例
    var my_p = new Vue({
        el: "#app02",
        data: {
            mes: "aa"
        }
    })
</script>

template叫做模板，代表我们实际的DOM元素，我们可以在template中放入多个标签，使用时仅需使用我们自定义的标签名即可，方便快捷

再来一个复杂一点的例子：

<div id="app">
    <zjx v-for="arr in arrays" v-bind:filed="arr"></zjx>
</div>

<script>
    Vue.component("zjx",{
        props: ['filed'],
        template: '<p>{{filed}}</p>'
    })

    var zjx = new Vue({
        el: "#app",
        data: {
            arrays: ["Java", "Python", "PHP", "c++"]
        },
        methods: {}
    })
</script>

描述一下：我们的vue实例中有一个数组，我们需要用自定义的标签遍历出数组内容，老样子，先创建组件，此时注意template中要取数据，至于怎么取我们先不管，然后就是正常创建vue实例，然后去vue实例的作用域下使用我们自定义的标签，因为要遍历数据，所以要用v-for, 正常情况下我们可以直接用{{arr}}获得遍历出来的数据，但这个标签是我们自定义的，真正的标签是template中声明的，所以我们接下来要做的是把遍历出来的数据让template中的标签获取到，通过v-bind给自定义标签随便设置一个属性field，并把arr放到field中，然后在组件中通过props获取field中的值，不用props获取不到，最后通过{{field}}得到数据

再来一个例子：

<div id = "btn-02">
    <mybtn></mybtn>
</div>

<script>
    // 先注册组件
    Vue.component("mybtn", {
        data: function(){
            return {
                count : 0
            }
        },
        methods: {
            myclick: function(){
                this.count++
            }
        },
        template: "<button v-on:click='myclick()'>瞅瞅我被你点了{{count}}次了</button>"
    })

    // 实例化vue
    var btn02 = new Vue({
        el: "#btn-02",
        data: {}
    })
</script>

注意：

组件中也可以有自己的data数据，但是和vue实例中的data数据有一点不一样，vue实例中的data可以作为一个对象，但是组件中的data必须是一个方法且该方法还得必须返回一个对象

computed计算属性

<div id="app">
    name: {{name}}
    <p>getTime1 = {{getTime1()}}</p>
    getTime2 = {{getTime2}}
</div>

<script>

    var app = new Vue({
        el: "#app",
        data(){
            return {
                name: "zjx"
            }
        },
        /**
				 * methods中的方法名不要跟computed重复，否则只会执行methods中的方法
				*/
        methods: {
            //方法名,调用时要加上()
            getTime1: function(){
                return Date.now();
            }
        },
        computed: {
            //属性名，调用时不需要加(),只有内部数据发生变化时，属性值才会重新计算
            getTime2: function(){
                this.name;
                return Date.now();
            }
        }
    })
</script>

插槽slot

先看个例子：

<div id="app">
    <child-component>我是你爸爸</child-component>
</div>

<script>
    Vue.component("child-component", {
        template: 
        `
			<span>Hello World!</span>
		`
    })

    var app = new Vue({
        el: "#app"

    })

</script>

结果显示：
在这里插入图片描述

如果要把“我是你爸爸”显示出来嘞，就要用到插槽 slot 了

Vue.component("child-component", {
template: 
    `
    <span>Hello <slot></slot> World!</span>
    `
})

于是乎
在这里插入图片描述

注意：

这里的标签代表着我们自定义标签中的内容，当slot出现在span外（仅从此例角度出发）时，谁先出现就显示谁的内容，只有slot出现在span内部时，两者的内容才可以同时出现

来个复杂一点的例子：

<div id="app">
    <todo>
        <todo-title slot="todo-title"></todo-title>
        <todo-li slot="todo-li" v-for="i in arr" v-bind:hobby=i></todo-li>
    </todo>
</div>

<script>
    Vue.component("todo", {
        template: 
        `
            <div>
            	<slot name="todo-title"></slot>
            	<ul>
            		<slot name="todo-li"></slot>
                </ul>
    		</div>
        `
    })

    Vue.component("todo-title", {
        template:
        `
			<div>劳资是标题</div>
		`
    })

    Vue.component("todo-li", {
        props: ['hobby'],
        template: 
        `
			<li>{{hobby}}</li>
		`
    })

    var app = new Vue({
        el: "#app",
        data(){
            return {
                arr: ["java", "c++", "python"]
            }
        }
    })
</script>

自定义事件内容分发

先看个演示

在这里插入图片描述

<div id="app">
    <parent></parent>
</div>

<script>
    var childNode = {
        template: `
        <div class="child">
            <div>
                <span>子组件数据</span>
                <input v-model="childMes" v-on:input="fun"/>
            </div>
        </div>
        `,
        data(){
            return {
                childMes: null
            }
        },
        methods: {
            fun(){
                this.$emit("pass-data", this.childMes)
            }
        }

    }

    var parentNode = {
        template:`
        <div class="parent">
            <div>
                <span>父组件数据</span>
                <input v-model="msg"/>
            </div>
        	<p>{{msg}}</p>
        	<child v-on:pass-data="getData"></child>
        </div>
        `,
        components: {
            'child': childNode
        },
        data(){
            return {
                msg: 'match'
            }
        },
        methods: {
            getData: function(value) {
                this.msg = value
            }
        }
    }

    var app = new Vue({
        el: "#app",
        components: {
            'parent': parentNode
        }
    })
			
</script>

第一步：

在这里插入图片描述

第二步:

在这里插入图片描述

第三步

在这里插入图片描述

四、Axios异步通信

特色：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

通过cdn使用

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

先来个简单的例子：

<div id="app">
    <div>zjx:{{res.zjx}}</div>
    <div><a v-bind:href="res.url">点我</a></div>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data(){
            return {
                res: {
                    zjx: null,
                    name: null,
                    age: null,
                    hobby: [],
                    obj: {
                        username: null,
                        password: null
                    },
                    url: null
                }
            }
        },
        mounted(){
            axios.get("../resource/zjx.json")
                .then(function(resource){
                	this.res = resource.data
            	}
            ))
        }
    })
</script>

zjx.json

{
	"zjx": "张金星",
	"name": "zjx",
	"age": 21,
	"hobby": ["java", "vue", "spring"],
	"obj": {
		"username": "zjx",
		"password": "123456"
	},
	"url": "https://blog.csdn.net/star_zhang_jx?spm=1000.2115.3001.5343"
}

上面例子中data(){}这玩意儿的用法可以防止数据污染，类似局部变量， data{},相当于全局变量，mounted(){}是一个钩子函数，在HTML页面完成渲染之后调用，get(url),表明以get方式向目标url发起请求，then代表请求结果

关于vue的钩子函数可以参考这篇文章：

create和mounted的区别

拦截器

直接上例子，目前了解的很少，先用着简单的吧

<script>
    var app = new Vue({
        el: "#app",
        data(){
            return {
                res: null
            }
        },
        mounted(){
            //请求发起前执行
            axios.interceptors.request.use(function(config){
                alert("请求发起前被拦截");
                alert("config = "+config)
                return(config);
            }, error => {
                return Promise.reject(error);
            }),
		   //发送请求
            axios.get("../resource/hht.json")
            .then(res => {
                console.log(res);
                this.res = res.data;
            })

            // 如果then代码块中出现错误，会被catch捕获
            .catch(error => {
                if (error.response) {
                    console.log(error.response.data);
                    console.log(error.response.status);
                    console.log(error.response.headers);
                } else if(error.request) {
                    console.log(error.request)
                } else {
                    console.log("error:"+error.message)
                }
                console.log(error.config)
            })
        }


    })
</script>