Vue.js快速入门 (cdn引入)-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue.js快速入门 (cdn引入)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

提示：以下是本篇文章正文内容，前端系列学习将会持续更新

一、Vue基础

官网：https://cn.vuejs.org

1.1 渐进式框架

Vue 是一个框架，也是一个响应式数据驱动。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。

重点：从早期基于 Dom 开发，到 Vue 中基于数据开发的编程思路转换。

1.2 第一个Vue程序

①导入开发版本的 Vue.js

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

②创建Vue实例对象, 设置el属性和data属性

<script>
	var app = new Vue({
		el:"#app",
      	data:{
        	message:"Hello,World!"
      	}
    })
</script>

③使用简洁的模板语法把数据渲染到页面上

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

1.3 el 挂载点

Vue 会管理 el 命中的元素及其内部的后代元素。
可以使用其它的选择器 (元素选择器、class选择器等)，但是建议使用ID选择器。
不能挂载 HTML 和 BODY 标签。

var app = new Vue({
	// el:"#app",
	// el:".app",
	// el:"div",
    el:"#div1",
    data:{
        message:"Hello,World!"
	}
})

1.4 data 数据对象

Vue 中用到的数据定义在 data 中。
data 中可以写复杂类型的数据，只要遵守 js 的语法即可。

<body>
    <div id="app">
        {{ message }}
        <h2> {{ school.name }} {{ school.phone }}</h2>
        <ul>
            <li>{{ campus[0] }}</li>
            <li>{{ campus[1] }}</li>
            <li>{{ campus[2] }}</li>
        </ul>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var app = new Vue({
    	el:"#app",
        data:{
            message:"你好 小黑!",
            school:{
                name:"XXX大学",
                phone:"400-618-9090"
            },
            campus:["A校区","B校区","C校区"]
        }
    })
</script>

回到目录…

二、Vue 指令

2.1 v-text 文本值

v-text 指令的作用是：设置标签的内容(textContent)。
默认会替换全部内容，使用差值表达式{{}}可以替换指定内容。
内部支持写表达式

<div id="app">
	<h2 v-text="message + '!'">世界</h2> <!-- 世界 -->
    <h2>{{ message + '!'}}世界</h2>      <!-- 你好!世界 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var app = new Vue({
    	el:"#app",
        data:{
        	message:"你好",
        }
    })
</script>

2.2 v-html 标签元素

v-html 指令的作用是：设置元素的 innerHTML。
内容中有 html 结构会被解析为标签。
解析文本使用 v-text，需要解析 html 结构使用 v-html。

<div id="app">
	<p v-html="message"></p>  <!-- <p><a href='https://www.baidu.com'>百度百科</a></p> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var app = new Vue({
    	el:"#app",
        data:{
        	message: "<a href='https://www.baidu.com'>百度百科</a>",
        }
    })
</script>

2.3 v-on 绑定事件

v-on 指令的作用是：为元素绑定事件，包括：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,change, select, submit, keydown, keypress, keyup, error。
v-on 指令可以简写为 @，如 v-on:click="func()" 等同于 @click="func()"。
绑定的方法定义在 methods 属性中，方法内部通过 this 关键字可以访问定义在 data 中的数据。

<div id="app">
    <p>{{message}}</p>
    <input type="button" value="触发事件1" v-on:click="func">
	<input type="button" value="触发事件2" @click="func2('张三')">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message: "Hello,World!",
        },
        methods:{
            func: function(){
            	alert(this.message);
            },
			func2: function(name) {
				alert("你好," + name);
			}
        }
    })
</script>

2.4 v-show 隐藏

v-show 指令的作用是：根据真假切换元素的显示状态。
v-show 原理是修改元素的 display 值，实现显示和隐藏。其值最终会解析为布尔值 (true元素显示，false元素隐藏)。
数据改变之后，对应元素的显示状态会同步更新。

<div id="app">
	<img v-show="isShow" src="./img/monkey.gif">
	<img v-show="age>=18" src="./img/monkey.gif">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var app = new Vue({
        el:"#app",
        data:{
            isShow: false,
            age: 19
        }
    })
</script>

2.5 v-if 消除

v-if 指令的作用是：根据表达式的真假切换元素的显示状态。
本质是通过操纵 dom 元素来切换显示状态。表达式值为true时，元素存在于dom树中；值为false时，从dom树中移除。
频繁的切换使用 v-show，反之使用 v-if，前者的切换消耗小。

<div id="app">
	<img v-if="isShow" src="./img/monkey.gif">
	<img v-if="age>=18" src="./img/monkey.gif">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var app = new Vue({
        el:"#app",
        data:{
            isShow: false,
            age: 19
        }
    })
</script>

2.6 v-bind 属性值

v-bind 指令的作用是：为元素绑定属性。
v-bind 指令可简写为 : ，如 v-bind:src="imgSrc" 等同于 :src="imgSrc"。
需要动态的增删 class 时，建议使用对象的方式。

<div id="app">
    <img v-bind:src="imgSrc"><br>
	<input type="button" :value="btnVal">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgSrc: "img/monkey.gif",
			btnVal: "猴子"
        }
    })
</script>

2.7 v-for 生成列表

v-for 指令的作用是：根据数据生成列表结构。经常和数组结合使用。
v-for 语法是 item in arr、(item,index) in arr，item 和 index 可以结合其他指令一起使用。
数组长度的更新会同步到页面上，是响应式的。

<div id="app">
	<ul>
		<li v-for="(it,index) in arr">
        	{{ index+1 }}.城市:{{ it }}
        </li>
    </ul>
    <p v-for="item in vegetables">
    	菜品: {{ item.name }}, 价格: {{ item.price }}
    </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var app = new Vue({
    	el:"#app",
        data:{
        	arr:["北京","上海","广州","深圳"],
            vegetables:[
            	{name:"西兰花炒蛋", price:20},
                {name:"蛋炒西蓝花", price:30}
            ]
        }
	})
</script>

2.8 v-model 双向数据绑定

v-model 指令的作用是便捷的设置和获取表单元素的值。
绑定的数据会和表单元素值相关联，绑定的数据 <=> 表单元素的值。

<div id="app">
	<input type="button" value="修改message" @click="setM">
	<input type="text" v-model="message" @keyup.enter="getM">
	<p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var app = new Vue({
		el:"#app",
		data:{
        	message:"沙丁鱼"
        },
        methods: {
        	getM:function(){
            	alert(this.message);
            },
            setM:function(){
            	this.message ="酷丁鱼";
            }
        }
	})
</script>

回到目录…

三、axios 网络请求库

官网：https://github.com/axios/axios

axios 是功能强大的网络请求库，必须先导入才可以使用。
使用 get 或 post 方法即可发送对应的请求 axios。
then 方法中的回调函数会在请求成功或失败时触发。通过回调函数的形参可以获取响应内容，或错误信息。
axios 回调函数中的 this 已经改变，无法访问到 data 中数据，需要额外的保存一份。

<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios.get(URL地址??key=value&key2=value2).then(function(response){}, function(err){})
	axios.post(地址, {key:value,key2:value2}).then(function(response){}, function(err){})
</script>

接口	随机获取一条笑话
请求地址	https://autumnfish.cn/api/joke
请求方法	get
请求参数	无
响应内容	随机笑话

<div id="app">
	<input type="button" value="获取笑话" @click="getJoke">
    <p> {{ joke }}</p>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var app = new Vue({
    	el:"#app",
        data:{
        	joke:"很好笑的笑话"
        },
        methods: {
        	getJoke:function(){
            	var that = this; // 额外保存Vue中的this
                axios.get("https://autumnfish.cn/api/joke").then(function(response){
                	that.joke = response.data;
                },function(err) {
                	alert("请求失败！");
                })
            }
        }
	})
</script>