vue.js学习系列-第一篇
VUE系列
一 简介
vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染
二 优势
1 vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
2 我们可以理解成VUE架构是由无数个vue实例组成,每个组件也被称为实例.每个实例有各自的属性数据和方法
三 示例
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">{{ message }}</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
四 分类讲解
1 初始化类
var appname = new Vue({})//定义初始化对象,对对象进行操作赋值
2 内部定义类属性
1 el属性(类似js中的id属性,通过此属性传递对象,通常作用于div id)
2 data属性(1 字典类型 { key:value} 2 采用{{key}}方式调用 3 alue可以是字符串,数字,列表,字典等任何支持的数据类型集合)
3 template属性(可以从这里进行模板的定义,如果不进行配置,则调用绑定对象的模板)
4 method 属性（定义vue实例对象的动作方法)
5 components ( 局部组件的注册从这里进行)
3 调用内部调用变量
1 object(定义的对象).$data(属性).message(value)
2 this(定义的对象).message(value)
4 method部分
method:{functionname: function1(),functionname: function2()}
5 标签与属性
1 li标签
v-for属性 目的:循环过滤 v-text属性 目的:输出变量 v-html属性 目的:输出变量,但是不会转义语法
eg:
<li v-for='item in itmes' v-text="item" v-html="item">item</li> //列表循环 代替{{value}}
vue部分
data:{ list:[1,2,3,4,5,6]
2 button标签
v-on属性 目的:触发事件
v-on: 可以缩写成@(小技巧) 配合click事件
eg:
<button @click="clickfunction>提交</button>//提交触发事件
vue部分
method:{
clickfunction: function(){
alter(this.inputvalue)
}
}
3 input标签
v-model属性 目的 通过input输入的值改变定义对象的属性,实现数据绑定
eg:
<input type='text' v-model="inputvalue />
vue部分
data:{ inputvalue:"3"},
6 组件方法
1 调用vue方法(全局)
Vue.component(
'object-name',
{
props:[value], //定义变量
template:"<li>{{value}}</li>"} //循环显示变量
}
)
2 定义对象(局部)
1 定义
var object-name={
props:[value], //定义变量
template:"<li>{{value}}</li>"} //循环显示变量
}
2 vue中注册
components:{
"object-name":object-name
},
2 body调用
<todo-item v-bind:content="item" v-for="item in list"></todo-item>
tod-itme为定义的object name
content为方法定义变量
v-bind 将变量和循环列表变量绑定
v-for 循环列表本身
7 总结
1 模板在组件中定义 2 局部组件需要在vue中注册 3 局部组件变量需要与循环变量进行绑定
五 总结
这是对我两台学习vue.js的一个小总结
vue.js学习系列-第一篇的更多相关文章
- vue.js学习系列-第一篇(代码)
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> ...
- Vue.js学习笔记 第一篇 数据绑定
双花括号文本插值 先来个最简单的例子,看完之后立马会用Vue了,是不是很有成就感 <!DOCTYPE html> <html> <head> <meta ch ...
- vue.js学习系列-第二篇
一 VUE实例生命周期钩子 1 生命周期函数 定义 生命周期函数就是vue在某一时间点自动执行的函数 2 具体函数 1 new vue() 2 before ...
- vue.js学习（第一课）
学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...
- Vue.js学习和第一个实例
第一个实例效果图: 1.node.js下载,然后安装.下载地址:链接:http://pan.baidu.com/s/1o7TONhS 密码:fosa 2.下载Vue.js.链接:http://pan. ...
- OpenStack学习系列-----第一篇 OpenStack介绍
刚开始接触OpenStack,被它所承诺的前景,以及现在业界对它的期望吸引(OpenStack被誉为21世纪的Linux开源社区,可以预见其的发展前景是何其广阔.).怎么说呢,我现在也暂时相信,Ope ...
- Vue.js学习笔记 第二篇 样式绑定
Class绑定的对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- 深入理解javascript函数系列第一篇——函数概述
× 目录 [1]定义 [2]返回值 [3]调用 前面的话 函数对任何一门语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.在javascript里,函数即 ...
随机推荐
- Python函数的装饰器修复技术（@wraps）
@wraps 函数的装饰器修复技术,可使被装饰的函数在增加了新功能的前提下,不改变原函数名称,还继续使用原函数的注释内容: 方便了上下文环境中不去更改原来使用的函数地方的函数名: 使用方法: from ...
- vmware workstation安装教程以及其中出现的错误解决方法
VMware Workstation 安装教程 1 下载好虚拟机,然后运行,点击下一步 2 选择我接受,下一步 3 选择安装的位置,可以自己选择,也可以默认不更改,这个无影响(图中I:\下面的VM ...
- iOS 友盟错误分析-2019
友盟的错误分析越来越人性化了 前提集成了友盟统计,并打包的时候保留了.dSYM文件 先看看效果 可以看到bug显而易见的被发现了!那个文件夹,那一行代码 那么怎么才能这样呢 首先加入符号表,就是.dS ...
- 在MVC中Dashboard基础入门操作
DevExpress中的Dashboard这个图形插件真的很好用, 只需要在设计器绑定数据就行了,完全不用写后台代码.我也是刚学这个插件,可能还有一些我没有了解的知识点,忘各位大佬不吝赐教.我写这篇博 ...
- JSON获取地址
JSON获取地址一: https://github.com/stleary/JSON-java JSON获取地址二: http://genson.io/ JSON获取地址一: https://code ...
- SSM项目使用GoEasy 获取客户端上下线实时状态变化及在线客户列表
一.背景 上篇SSM项目使用GoEasy 实现web消息推送服务是GoEasy的一个用途,今天我们来看GoEasy的第二个用途:订阅客户端上下线实时状态变化.获取当前在线客户数量和在线客户列表.截止我 ...
- IIS7下设置https主机名灰色无法修改
打开iis绑定域名时,点击绑定弹出绑定框,在选择类型为“https”的时候,主机名为灰色的无法填写 解决方法: 1. 选择https,在选择相应的SSL证书,点击确定 2. 打开C:\Windows\ ...
- Linux下MySql的登陆和管理操作
一.mysql数据库启停1.linux下启动mysql的命令: mysqladmin start/ect/init.d/mysql start (前面为mysql的安装路径)2.linux下重启 ...
- ShoppingCart
数据库设计 表结构 [dbo].[AdminInfo] AdminID, AdminName, AdminPassword, RoleID [dbo].[BK_Car] ID, CarID, ISBN ...
- 【dp】友好城市
题目一: [题目描述] Palmia国有一条横贯东西的大河,河有笔直的南北两岸,岸上各有位置各不相同的N个城市.北岸的每个城市有且仅有一个友好城市在南岸,而且不同城市的友好城市不相同. 每对友好城市都 ...