『前端学习笔记』 Vue.js 基础

最新推荐文章于 2020-08-12 00:02:56 发布

大熊软糖M

最新推荐文章于 2020-08-12 00:02:56 发布

阅读量472

点赞数

分类专栏：前端学习笔记文章标签： vue

本文链接：https://blog.csdn.net/GLZX_HM/article/details/107872380

版权

本文是Vue.js的基础学习笔记，涵盖了框架与分层架构、Vue实例创建、数据绑定（包括v-bind、v-model）、事件处理（v-on及修饰符）等内容。通过示例介绍了如何在Vue中实现DOM操作的替代方案，如v-text和v-html属性，以及如何利用vue-resource进行Ajax请求。同时，文章还讨论了Vue实例的生命周期和调试工具vue-devtools的使用。

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

参考视频：学 Vue.js 看这个就够了

官方文档：Vue.js

基本概念

框架与分层架构

前端框架

三大框架ARV：Angular、React、Vue。都比较适合做单页面。
提高开发效率的发展历程：原生JS - Jquery之类的类库 - 前端模板引擎 - Angular.js / Vue.js

Vue.js

Vue.js主要作用：构建用户界面，只关注视图层（MVC）
Vue.js核心概念：不再操作DOM元素，更多关注业务逻辑

框架与库

框架：完整的解决方案，对项目入侵性较大。如果需要更换框架，则需要重新架构整个项目。
库（插件）：提供某一个小功能，对项目入侵性较小，很容易切换其他库实现需求。

MVC与MVVN

MVC：Model模型层，View视图层，Controller控制层。后端分层概念。
MVVM：Model-View-ViewModel，前端视图层概念。

在这里插入图片描述

引入Vue

官方文档
引入过程

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

绑定数据（innerHTML）

new Vue({ })构造函数

<script src="js/vue.js"></script>
<script>
	var vm = new Vue({
   
		el:'.myapp', //element元素，实例控制页面上的哪个区域
		data: {
    //data属性, el中要用到的属性
			msg: 'HelloWorld'
		},
		methods: {
    //methods方法，el中要用到的方法
			show: ()=>{
   alert(this.msg)} //this访问
		}
	});
</script>

注意符号

注意el、data、methods之间的,，和data、methods内部元素之间的,。
注意构造函数内部的{ }。

注意事项

el中元素的选择器同CSS。
不可以给body等标签加id。

{ { }}表达式：插值表达式

将data中定义的属性，以插值表达式形式嵌入HTML。

基本代码（在body标签内）

<div class="myapp">
	<p>{
   {
   msg}}</p>
</div>

<script src="js/vue.js"></script>
<script>
	var vm = new Vue({
   
		el:'.myapp', 
		data: {
    
			msg: 'HelloWorld'
		}
	});
</script>

data中自定义的元素msg被写入了p标签。

MVVM分析

html中div代码：View视图层
js代码中的vm对象：ViewModel层
js代码中的vm对象中的data：Model层

v-cloak属性(布尔)：解决插值表达式闪烁问题

若加载速度较慢，用户可能会先看到{ {msg}}这个变量，再看到其对应值。

增加v-cloak属性并设置CSS样式

<style>
	[v-cloak]{
   
		display: none;
	}
</style>

<div class="myapp">
	<p v-cloak>{
   {
   msg}}</p>
</div>

<script src="js/vue.js"></script>
<script>
	var vm = new Vue({
   
		el:'.myapp', 
		data: {
    
			msg: 'HelloWorld'
		}
	});
</script>

结果：加载成功之前，调用CSS样式（不显示）

v-text属性：引入文本

渲染数据的两种方式（等效）

<div class="myapp">
	<p v-cloak>{
   {
   msg}}</p>
	<p v-text="msg"></p>
</div>

<script src="js/vue.js"></script>
<script>
	var vm = new Vue({
   
		el:'.myapp',
		data: {
    
			msg: 'HelloWorld'
		}
	});
</script>

比较

区别	插值表达式{ { }}	v-text
作用	渲染文本数据	渲染文本数据
闪烁	有闪烁问题	无闪烁问题
文本	任意添加和使用文本	会覆盖innerHTML

v-html属性：引入文本(含html元素)

<div class="myapp">
	<p v-html="myhtml"></p>
</div>

<script src="js/vue.js"></script>
<script>
	var vm = new Vue({
   
		el:'.myapp',
		data: {
    
			myhtml: '<h1>标题</h1>'
		}
	});
</script>

绑定数据

v-bind绑定(缩写:)

将字符串解析为Vue内部数据。

<div class="myapp">
	<!--渲染结果：msg-->
	<input type="button" value="按钮" title="msg"> 
	<!--渲染结果：HelloWorld--> <!--识别为变量-->
	<input type="button" value="按钮" v-bind:title="msg">
	<!--渲染结果：HelloWorld123--> <!--识别为变量：可以使用JS表达式-->
	<input type="button" value="按钮" v-bind:title="msg + '123'">	
	<!--渲染结果：HelloWorld123--> <!--缩写：只保留冒号-->
	<input type="button" value="按钮" :title="msg + '123'">	
</div>

<script src="js/vue.js"></script>
<script>
	var vm = new Vue({
   
		el:'.myapp',
		data: {
    
			msg: 'HelloWorld'
		}
	});
</script>

绑定CSS：普通样式

包括内部和外部引入。

<style>
	.red{
   color: red} /*颜色*/
	.thin{
   font-weight: 200} /*宽度*/
	.italic{
   font-style: italic} /*斜体*/
	.active{
   letter-spacing: 0.5em} /*字符间距*/
</style>

<div class="myapp">
	<h1 class="red active">h1</h1> <!--不使用v-bind-->
	
	<h1 :class="['red', 'active']">h1</h1> <!--字符串数组-->
	
	<h1 :class="['red', flag?'active':'']">h1</h1> <!--字符串数组：变量+三元运算符-->
	<h1 :class="['red', {active:flag}]">h1</h1> <!--字符串数组&#x