Vue使用心得及整理-第一篇

最新推荐文章于 2025-01-15 10:26:07 发布

原创最新推荐文章于 2025-01-15 10:26:07 发布 · 282 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

前端JS框架专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Vue.js的基本概念，包括其作为渐进式JavaScript框架的特点，MVVM设计模式的运作原理，以及如何从引入库开始逐步构建应用。还详细讲解了数据绑定、指令使用、组件创建等核心功能。

Vue使用心得-第一篇

Vue是什么

前端的渐进式JS框架，拥有MVVM的设计模式

MVVM是什么

Model(模型)，View(视图)，ViewModel(双向绑定）
通过监听器来监听Model和View的变化，一旦一方发生了修改，会自动去修改对方的数据

Vue的使用

	1.引入vue
		<script src="vuejs/vue.js"></script>
		1.1 路径(相对路径还是绝对路径)
		1.2 vue.js[开发版,可以看源码]/vue.min.js[体积小,加载速度快]
	2.准备vue的工作台(挂载点)
		<div id="app"> {{message}} {{say()}}</div>
	3.准备数据(创建vue对象)
		3.1 el:元素的挂载(id,class,标签：建议使用id),只有挂载的元素才能使用表达式这些
		3.2 data:数据(vue对象的所有数据都写在这里)
		3.3 methods:vue对象的方法(可以有多个)
				this指的就是这个vue对象,js与表达式中都可以调用这个方法
		var app = new Vue({
			el:"#app",
			data:{
				message:"你好啊"
			},
			methods:{
				say(){
					return this.message+",xxxx";
				}
			}
		})
		app.say();

VUE双向绑定案例

代码:v-model:绑定了咱们的vue中的username数据
效果:(在修改input中的值, 绑定的数据与展示都会发生变化变化)
<div id="app"> 
	<input type="text" v-model="username"> {{username}}
</div>

var app = new Vue({
		el:"#app",
		data:{
			username:"你好啊"
		}
	})

表达式

表达式:{{}} -> 必需在挂载的元素
加减乘法,三目运算,字符串调用方法,对象操作,数组,也可以调用方法

指令

vue指定的一些特殊的属性 : v-属性名
v-text:直接展示
v-html:直接展示(解析html标签)
v-for:循环(数组,对象,数字,字符串)
	v:值 i:下标 k:属性名
	v-for="(v,i) in 数组" 
	v-for="(v,k,i) in 对象" 
v-show:只是隐藏(display="none")
v-if:直接就没有了
	v-else-if=""
	v-else
v-bind:绑定属性(属性中使用vue的表达式)
	标准写法: <img v-bind:src="src" />
	简写形式(建议): <img :src="src" />
	绑定对象属性: <img v-bind="img" />
v-model:双向绑定(只能用到input,select,textarea中)
v-on:事件绑定
	<input type="button" v-on:click="say()" />
	<input type="button" v-on:click="say" />
	简写形式:
	<input type="button" @click="say" />

组件(自定义标签)

1.先定义组件，再挂载
2.组件的模板必需要一个根标签
3.命名如果是驼峰(建议小写) myTag -> <my-tag>
全局组件:
	 Vue.component("mytag",{
        //组合的模板
        template:"<h1>假如有一千句html</h1>"
    })
局部组件：
	 new Vue({
        el:"#app",
        //组件(多个)
        components:{
            mytag:{
                template:"<h2>我是局部组件</h2>"
            }
        }
    })