最近公司开发新的项目,前端框架选定vue,对于前端小白的我,需要自己学习补充能量。

vue的最大特点:响应的数据绑定、组合的视图组件。

vue文件里面包含三种:<template>html模板</template>  <script>js</script>  <style>css<style>

webpack 将vue的文件打包成浏览器能识别的 html(视图层)、js(就是一个vue对象,model数据层在这里)、css

全局安装vue的环境:

npm install -g vue-cli(可以在命令行vue命令)

vue init webpack vueTest(创建一个基于webpack模板的vue的新项目,项目名称为:vueTest)

npm install -d(将项目中package.json中的依赖的包下载到vueTest)

npm  run dev(启动环境,在package.json中的"scripts": "dev": "node build/dev-server.js",所以启动只需要npm run  dev  就好,在浏览器中可以浏览该项目:http://localhost:8080)如下图所示:可以实时监控,当你修改了js,页面就会实时输出对应的内容

vue.js重要的组件:

1:data:数据

2:method:方法

3:watch:监听

4:el:绑定的对象

vue的数据渲染:

三种形式:{{}}、v-text、v-html效果上没有多大的区别。

当Vue中的a发生变化,上面的a也会相对应发生变化,响应式的数据绑定。

常用的指令:

控制模块隐藏:v-if、v-show

渲染循环列表:v-for,就会循环出来两个qinbb、mmp

事件绑定:v-on(其中v-on:click和@click是一样的事件绑定)

属性绑定:v-bind,这个一般绑定的是class属性,所以v-bind会省略,其中imageSrc是字符串,第三个p中的classA和classB也是字符串,{red:isRed}这个是对象,is说明是个布尔值。

总结:

new一个vue对象,主要包含了三个重要的属性data(vue对象的数据相当于model)、method(vue对象的方法)、watch(vue对象的事件监听)

模板指令将视图层(html)和逻辑层(data)连接起来,常用的模板指令:

v-if(v-show):判断指令

v-text(v-html、{{}}):模板渲染

v-for:循环指令

v-on:事件绑定

小白的vue学习路程的更多相关文章

  1. 学习web前端学习路程

    学习路程: 1.HTML和CSS基础 2.JavaScript语言 3.jQuery 4.综合网站实践 5.优化及调试

  2. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  3. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  4. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  5. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  6. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  7. vue学习第一篇 hello world

    计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...

  8. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  9. vue学习笔记(二)——简单的介绍以及安装

    学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...

随机推荐

  1. Java多线程系列--“JUC集合”08之 LinkedBlockingQueue

    概要 本章介绍JUC包中的LinkedBlockingQueue.内容包括:LinkedBlockingQueue介绍LinkedBlockingQueue原理和数据结构LinkedBlockingQ ...

  2. [Node.js] Node.js中的流

    原文地址:http://www.moye.me/2015/03/29/streaming_in_node/ 什么是流? 说到流,就涉及到一个*nix的概念:管道——在*nix中,流在Shell中被实现 ...

  3. js的日期格式化

    function date(){ var date = new Date(); var year = date.getFullYear(); var month = date.getMonth()+1 ...

  4. Android学习笔记之Fast Json的使用

    PS:最近这两天发现了Fast Json 感觉实在是强大.. 学习内容: 1.什么是Fast Json 2.如何使用Fast Json 3.Fast Json的相关原理 4.Fast Json的优势, ...

  5. 用Vue实现一个全选指令

    最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便. 第一次做全选的时候是刚开始接触v ...

  6. Android与Swift iOS开发:语言与框架对比

    Swift是现在Apple主推的语言,2014年新推出的语言,比Scala等“新”语言还要年轻10岁.2015年秋已经开源.目前在linux上可用,最近已经支持Android NDK:在树莓派上有Sw ...

  7. Emit学习(4) - Dapper解析之数据对象映射(一)

    感觉好久没有写博客了, 这几天有点小忙, 接下来会更忙, 索性就先写一篇吧. 后面估计会有更长的一段时间不会更新博客了. 废话不多说, 先上菜. 一.示例 1. 先建类, 类的名称与读取的表名并没有什 ...

  8. Web API应用架构设计分析(1)

    Web API 是一种应用接口框架,它能够构建HTTP服务以支撑更广泛的客户端(包括浏览器,手机和平板电脑等移动设备)的框架, ASP.NET Web API 是一种用于在 .NET Framewor ...

  9. 自己对Debug的一些感悟

    A.13-03-06记. 1.当项目中发现bug的时候,首先考虑如何重现,能够重现的bug比较好找寻根源. 2.思考下以前是否发现过类似bug,是否由一些外部配置所决定. 3.有循环时候注意临界条件.

  10. Wojilu学习笔记 (01)

    “我记录”开发框架(wojilu framework) 是 .net 平台下的综合开发框架,主要用于 web 方面的快速开发. 官方网址:http://www.wojilu.com源码托管网址: ht ...