vue.js主要内容
vue的主要内容
1.了解vue
2.vue开发环境的搭建和脚手架工具的使用
3.vue具体的指令和项目实战
1.了解vue
1.具备基础:html、css、js,模块化概念、ES6语法(简单即可)
2.特点: vue吸收了react和angular的优点
3.vue的一个组件:template---------->html
script-------------->js
style--------------->css
4.vue文件的后缀名是.vue
2.vue开发环境的搭建和脚手架工具的使用
1.vue开发环境的搭建-npm/cnpm命令行安装
# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 "webpack" 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
2.vue.js的重要组件
1.data
2.methods
3.watch
4.模板指令-html和vue对象的粘合剂
数据渲染---->v-text,v-html,{{}}
控制模块隐藏--->v-if,v-show---值是布尔值,区别是v-if直接不渲染,而v-show通过display:none隐藏
渲染循环列表--->v-for
事件绑定------->v-on:click="",简写@click=""
属性绑定------->v-bind,例如v-bind:src="",简写:src="",:class="{}",:class="[]"
【总结】
1. new一个vue对象的时候你可以设置它的属性,其中最重要的包括三个,分别data,methods,watch。
2.data代表vue对象的数据,methods代表vue对象的方法,watch设置了对象监听的方法。
3.vue对象里的设置通过html指令进行关联
4.重要的指令包括
v-text[渲染数据]、v-if[控制显示]、v-on[绑定事件]、v-for[循环渲染]等。
vue.js主要内容的更多相关文章
- Vue.js安装使用教程
一.说明 上大学前,请的都是前端JavaScript.后端ASP/PHP/JSP.前后端代码混杂:上大学时,请的都是前端Jquery.后端SSH.前后端代码分离通过模板关联:大学出来后,请的都是前端三 ...
- 一个基于Vue.js+Mongodb+Node.js的博客内容管理系统
这个项目最初其实是fork别人的项目.当初想接触下mongodb数据库,找个例子学习下,后来改着改着就面目全非了.后台和数据库重构,前端增加了登录注册功能,仅保留了博客设置页面,但是也优化了. 一.功 ...
- 学习Vue.js需要了解的部分内容
重要: 1.如果要通过js/模板引用 图片到项目,图片路径需要使用require. 2.$event: $event 等于$emit 抛出的值,还可以使用$event.target.value. $e ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 从Vue.js窥探前端行业
近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...
- vue.js几行实现的简单的todo list
序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...
- Vue.js——60分钟组件快速入门(上篇)
组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
随机推荐
- Exceptionless(二) - 使用进阶
Exceptionless(二) - 使用进阶 作者:markjiang7m2 原文地址:https://www.cnblogs.com/markjiang7m2/p/11100563.html 官网 ...
- Spring Boot:实现MyBatis分页
综合概述 想必大家都有过这样的体验,在使用Mybatis时,最头痛的就是写分页了,需要先写一个查询count的select语句,然后再写一个真正分页查询的语句,当查询条件多了之后,会发现真的不想花双倍 ...
- git push 时 failed to push some refs 的解决方案
我们在利用 GIt 上传代码的时候,往往会遇到这样一个问题,导致我们的代码没有办法正常上传到仓库中 造成这个问题的原因其实很简单,就是因为远程仓库和本地库不一致. 基于这样的一个问题,解决办法自然也就 ...
- spring boot 2.x 系列 —— spring boot 整合 kafka
文章目录 一.kafka的相关概念: 1.主题和分区 2.分区复制 3. 生产者 4. 消费者 5.broker和集群 二.项目说明 1.1 项目结构说明 1.2 主要依赖 二. 整合 kafka 2 ...
- MAC 安装telnet
https://blog.csdn.net/licheng70356213/article/details/81162660 在10.12及以下版本,都内置了telnet命令,但是在10.13中,已经 ...
- centos7 中安装 htop
首先启用 EPEL Repository: yum install -y epel-release 启用 EPEL Repository 后, 可以用 yum 直接安裝 Htop: yum insta ...
- Linux实例/etc/fstab文件配置错误导致系统启动异常
Centos 7.3系统 问题现象: 阿里云ECS升级配置后重启,SSH连接不上.登录控制台远程连接ECS,出现以下界面. 提交工单阿里云反馈:https://help.aliyun.com/kno ...
- Java上机题(封装)(编写student类)
今天帮大一的童鞋写Java上机题 题目虽然很简单,但是刚拿到题目的时候愣了一下,然后就疯狂get set QuQ 其实这是一个特别基本的封装的题目(之前实验室面试大二的时候竟然还有蛮多人不知道封装的概 ...
- Ceph RGW Multisite 数据同步流程图
- nginx反向代理中神奇的斜线
nginx反向代理中神奇的斜线 在进行nginx反向代理配置的时候,location和proxy_pass中的斜线会造成各种困扰,有时候多一个或少一个斜线,就会造成完全不同的结果,所以特地将locat ...