【vue.js】入门

慕课网视频学习笔记:http://www.imooc.com/learn/694

1.将html、js、css写到一个后缀名.vue的文件中,区分这三种类型是通过<template>、<script>、<style>来区分,这个.vue文件在打包的过程中会被转换成浏览器能识别的传统html、js、css。

2.使用vue.js官方提供的命令行工具,可以让我们把关注点放在项目功能的实现上。

3.需要安装依赖(cnpm install),可进入package.json中查看。比如vue-loader,其作用就是解析vue文件使浏览器能识别。

4.页面的生成,通过webpack打包工具将.vue文件打包成html、js、css,其中js就是一个新的vue对象。

5.vue.js组件的重要选项:data、methods、watch

6.vue对象和页面展现的联系(html和vue对象的粘合剂)

7.v-if直接不渲染,而v-show在代码中是能看到的(用的css中display)。

8.items指向vue对象中的列表,item是循环体变量,通过循环体对象的属性来取apple等值。

9.dothis是从methods中取方法

10.v-bind中变量字符串和布尔值的判断,比如imageSrc、red、classA、classB是字符串,而isRed是布尔值,它是用于判断red(red是对象中的key)是否展现的

11.入口文件index.html会默认调用main.js文件(src目录下)

import Vue from ‘vue‘;
import VueRouter from ‘vue-router‘;
import App from ‘./App‘;

import vue from ‘vue’  打包时vue会从node_modules里面取vue框架的相关东西。

import App from ‘./App‘;  来自统计目录下的App文件,省略了.vue后缀

会自动把驼峰的写法(在main.js中)转为小写或者带横杠-(index.html中)的写法。

12.组件一定要注册才能使用

App.vue文件中有<hello></hello>标签,和刚刚的逻辑相同,也需要注册,导入components目录下的hello.vue

export是es6的语法

13.红色框部分为es6写法(app.vue中)

其相当于:   data:function(){return...}

14.app.vue中export出来的东西会在项目中自动生成new vue({data。。。}),export的就是vue中的参数{。。。}

简单理解:把红色框部分理解为vue中的参数和属性即可

在编写app.vue的时候,可以模仿app.vue的写法,把红色框部分改成:   data(){。。。}

时间: 2024-10-12 17:42:05

【vue.js】入门的相关文章

Vue.js 入门之路

最近在学习 Vue ,简单的介绍一下Vue.js,它是一款流行的 JavaScript 前端框架,旨在更好地组织与简化 Web 开发,Vue 是面向数据的编程,也就是 MVVM 模式.想了解的更多就去Vue.js官网. Vue.js 入门 很多大牛都说学习一门编程最好的方式就是阅读官方文档,这是不可否认的.问题是像我这种新人阅读那种干巴巴的文档确实有点无聊又吃力,附带效果:头皮发麻.恰好在网上找到了一些我觉得很实用的教程,在这里分享出来,希望能帮助和我一样的新手尽快的入门.在学习 Vue.js 

Vue.js 入门指南之“前传”(含sublime text 3 配置)

题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴级别”的前端开发人员,大牛请绕过. 1,下载安装Node.js 去 Node.js 官网下载一个Windows环节的安装包 node-v6.2.0-x64.rar 文件,一路安装下去即可.官网访问很慢,可以试试中文网 http://nodejs.cn/ 2,配置Vue环境 一开始看<基于Webpac

Vue.js入门

之前一直用的是jQuery,jQuery手动操作DOM导致性能不够好,因为DOM修改导致的页面重绘.重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨! Vue.js是数据驱动的,它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新. 一个简单的例子: 一个页面需要通过异步请求获取数据然后展示在页面上,用jQuery方法处理是: $(function(){ var $jsontip = $(

Vue.js 入门指南之“前传”

题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴级别”的前端开发人员,大牛请绕过. 1,下载安装Node.js 去 Node.js 官网下载一个Windows环节的安装包 node-v6.2.0-x64.rar 文件,一路安装下去即可.官网访问很慢,可以试试中文网 http://nodejs.cn/ 2,配置Vue环境 一开始看<基于Webpac

一个Java程序猿眼中的前后端分离以及Vue.js入门

松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ,因此在我的书里边就没有多说.但是最近总结小伙伴遇到的问题,感觉很多人对前后端分离开发还是两眼一抹黑,所以今天松哥想和大家聊一下前后端分离以及 Vue.js 的一点事,算是一个简单的入门科普吧. 前后端不分 后端模板:Jsp.FreeMarker.Velocity 前端模板:Thymeleaf 前

vue.js 入门案例

作者:故事我忘了¢个人微信公众号:程序猿的月光宝盒 1 vue.js 研究 1.1 vue.js 介绍 1.1.1.vue.js是什么? Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计 为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种 支持类库结合使用时, Vue 也完全能够为复杂的单页应用提供驱动. 渐进式框架:Progressi

vue.js 入门

简单一句话来描述:vue.js是一个前端框架. 官方文档:https://cn.vuejs.org/v2/guide/index.html 虽然,我以前也会改一些前端样式,但主要是基于HTML和CSS,HTML主要控制页面的结构,CSS主要来控制样式.涉及到JavaScript就比较小白了. 我花了一个下午照着官方文档做练习,当然是只创建一个xxx_demo.html文件,在<script></script> 标签对之间写 Vue.js语法.这不算错,但在工程化的今天,这么学得猴年

Vue.JS入门学习随笔

PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!! Vue.js(读音 /vju?/, 类似于view)是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单

Vue.js入门。十个指令。4种常用方法

在进入Vue之前我们还是先了解一下使用Vue的面向对象的三种创建方式吧 类和对象是 面向编程中最重要的两个概念,一定要理清 类 : 是一个抽象概念(不是实际存在),(属性,行为) 对象 : 是实际存在的,是对象的实例化,看过几个例子你就会明白. 在ES6之前:1.内置的构造函数:2.自定义的构造函数:3.字面量 . 1.内置的构造函数: 2.自定义的构造函数: 3.字面量 . 创建Vue实例 首先要确保你的项目引入了Vue.js,需要用他的框架就必须要引用! 创建一个vue实例非常简单 data

萌新--关于vue.js入门及环境搭建

十几天闭关修炼,恶补了html跟css以及JavaScript相应的基础知识,恰巧有个群友准备做开源项目,愿意带着我做,但是要求我必须懂vue.js,所以开始恶补vue.js相关的东西. 在淘宝上买了相关视频,前两章简介听得懵懵懂懂的,能够勉强理解.到第三章,开始有案例之后,整个人就懵了,为啥老师的一个程序文件夹那么多东西,我就一个可怜兮兮的html??等等,老师说这node.js是什么? 不是另外一个框架吗?webpack又是啥?... 一连串懵逼之后,终于发现,视频不适合我.开始找其他的途径