vue.js入门

最新推荐文章于 2024-04-19 00:17:37 发布

JessePinkmen

最新推荐文章于 2024-04-19 00:17:37 发布

阅读量197

点赞数

分类专栏：前端 js框架

本文链接：https://blog.csdn.net/JessePinkmen/article/details/84071713

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

js框架

6 篇文章 0 订阅

订阅专栏

vue.js入门

学习vue需要贯彻数据驱动视图思想

vue是一个框架
相比jquery作为函数库，函数库只是一些工具来开发页面
框架直接相当于做好房子的结构，只用在框架上做一些修饰，就开发好页面

所以jquery是学习工具方法的使用，vue是学习一些指令

vue可以作为js库用，也可以用它的全套工具构建系统界面，只关注视图层，目标是通过尽可能简单的api实现响应的数据绑定，类似于后台的模版语言。

可以将界面拆分成一个个组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)系统。单页面就是页面一层层的覆盖，模版只有一个

前端三大框架Angular.js、React.js、Vue.js
React上手比较难，适合开发大型程序；
Vue 上手简单
Vue还可以通过wbs开发移动app;mpvue可以开发小程序；可以做windows桌面应用

1.基本使用

一个vue的使用是从一个对象开始的
显示数据：从胡子语法开始Mustache{{}}
vue没有入口函数，所以可以用js的window.onload 但是工作中vue当到html的底部

//引 包
<script type="text/javascript" src="js/vue.min.js"></script>
...
<body>
	<div id="app">{{ str }}</div>
</body>
<script>
var vm = new Vue({
	//vue要控制的标签：el 限定vue作用范围
	el:'#app',
	//data:存vue的数据模型
	data:{
		str:'hello world',
		xxx
	}
})
</script>

2.Vue的模版语法

vue对象只要在他的控制范围内，能控制这个标签以及这个标签里的所有内容，意思是包括子标签

2.1数据的其他显示方法

{{}}里可以直接调用vue对象定义的数据

{{}}模版语法里面可以写原生js
<p>{{ str.split('').reverse().join('') }}</p>

可以写三元表达式：条件?条件成立：条件不成立
<div>{{ bool?'成立':'不成立' }}</div>

2.2 vue控制html属性

v-xx这是指令的意思 :具备特殊功能的语法，vv-bind控制html属性

{{<a v-bind:href="url1">百度</a>}}
{{<a :href="url1">百度</a>}}

v-bind:和:这是一个意思，控制html属性

2.3 绑定事件

绑定事件 v-on:xx=“xx”
v-on:click="num+=1"
化简写作:@click="" 这是一个意思

2.4 封装函数

methonds:{
//函数名：匿名函数
fnAdd:function(){
this.num += 1 //当前对象的num
}
}

<button @click="fnAdd(参数)">自增</button>

调用函数有参数的时候必须加()传入参数

3.控制css

两种直接控制css属性，或者控制类改变css
数据驱动视图 data里的键值对改变所以vue是从数据开始准备

vue控制class属性可以写字典，对象，列表

字典：在data里以布尔的型储存这样对应控制class
字典:{‘类名’:布尔型数值} true添加类，false不添加类
<div:class={}></div>

对象型：把类放入对象里写 key是真实类名，如果取值true就添加类

列表：:class="[myname1,myname2]"....data:{myname1:'aaa',myname2:'bbb'}

三元运算： :class="[bool2?'abc':'jqk',xxx]"

控制css属性:style=""和class一样也有那些方法

JessePinkmen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js入门

vue.js入门学习vue需要贯彻数据驱动视图思想vue是一个框架相比jquery作为函数库，函数库只是一些工具来开发页面框架直接相当于做好房子的结构，只用在框架上做一些修饰，就开发好页面所以jquery是学习工具方法的使用，vue是学习一些指令vue可以作为js库用，也可以用它的全套工具构建系统界面，只关注视图层，目标是通过尽可能简单的api实现响应的数据绑定，类似于后台的模版语言。...
复制链接

扫一扫

专栏目录