慕课网视频学习笔记: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(){。。。}

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

  1. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

  2. 免费的 Vue.js 入门与进阶视频教程

    这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...

  3. Vue.js入门(一)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...

  4. Vue.js 入门:从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  5. Vue.js入门

    之前一直用的是jQuery,jQuery手动操作DOM导致性能不够好,因为DOM修改导致的页面重绘.重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨! Vue.js是数据驱 ...

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

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

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

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...

  8. vue.js 入门学习

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. [转]Vue.js 入门教程

    本文转自:http://www.runoob.com/w3cnote/vue-js-quickstart.html 什么是 Vue.js? Vue.js 是用于构建交互式的 Web  界面的库. Vu ...

  10. Vue.js入门系列(一)

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

随机推荐

  1. SQL 之相关语法及操作符

    概述:UNION.SELECT INTO.INSERT INTO SELECT.SQL 约束. UNION操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION ...

  2. jQuery 关于ajaxfileupload.js插件的逐步解析(ajaxfileupload.js第二弹)

    如果你看了上一篇<ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)>的话,应该就知道我是逼不得已要认真学 ...

  3. 撩课-Java每天5道面试题第8天

    撩课Java+系统架构 视频 点击开始学习 71.jsp有哪些内置对象?作用分别是什么? Page, pageContext, request, response, session, applicat ...

  4. HTML骨架详解

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HDU 3466(01背包变种

    http://acm.hdu.edu.cn/showproblem.php?pid=3466 http://www.cnblogs.com/andre0506/archive/2012/09/20/2 ...

  6. UVA 562(01背包)

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=114&page=s ...

  7. jquery怎么取得有好几个并且name是相同的值

    jQuery("input[name='number']").each(function(){ alert(jQuery(this).val()); });

  8. 微服务架构之spring cloud turbine

    在前面介绍了spring cloud hystrix及其hystrix dashboard,但都是对单个项目的监控,对于一个为项目而言,必定有很多微服务,一个一个去看非常的不方便,如果有一个能集中熔断 ...

  9. 剑指Offer-编程详解-二维数组中的查找

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...

  10. WebService程序数据集之WSDL取数

    在通用的webservice集合中,在集合中使用wsdl取数的方式获取数据,并将数据转换为程序数据集,那么怎样通过wsdl取数并转换为程序数据集呢? 首先将wsdl获取到的数据数据转换为二维数组,然后 ...