小白的vue学习路程
最近公司开发新的项目,前端框架选定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学习路程的更多相关文章
- 学习web前端学习路程
学习路程: 1.HTML和CSS基础 2.JavaScript语言 3.jQuery 4.综合网站实践 5.优化及调试
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue学习-01
1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- vue学习第一篇 hello world
计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...
- vue学习心得
前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...
- vue学习笔记(二)——简单的介绍以及安装
学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...
随机推荐
- 分享一个 C# Winfrom 下的 OutlookBar 控件的使用
最近在上网的时候,发现了这个C# 下的 OutlookBar 控件,看了一下感觉还真不错,特此记录一下. using System; using System.Drawing; using Syste ...
- Yii的学习(1)--安装配置
之前在sina博客写过Yii的文章,来到博客园之后,没再写过关于Yii的文章,正好端午假期没啥事,就结合以前的博客,Yii的官方文档,再加上最近的关于Yii的收获总结一下,写个系列~~ Yii是一个基 ...
- 机器学习&数据挖掘笔记_12(对Conjugate Gradient 优化的简单理解)
数学优化方法在机器学习算法中至关重要,本篇博客主要来简单介绍下Conjugate Gradient(共轭梯度法,以下简称CG)算法,内容是参考的文献为:An Introduction to the C ...
- Python编码问题整理
认识常见编码 GB2312是中国规定的汉字编码,也可以说是简体中文的字符集编码 GBK 是 GB2312的扩展 ,除了兼容GB2312外,它还能显示繁体中文,还有日文的假名 cp936:中文本地系统是 ...
- 没有R.java问题找不到getActionBar()方法
android项目,可是项目中没有重要的R.java,并且报错,说是找不到getActionBar()方法,上网寻找原因,终于寻得解决方法: 1.解决项目中没有R.java问题.在Eclipse ...
- Android反编译(一)之反编译JAVA源码
Android反编译(一) 之反编译JAVA源码 [目录] 1.工具 2.反编译步骤 3.实例 4.装X技巧 1.工具 1).dex反编译JAR工具 dex2jar http://code.go ...
- java并发编程读书笔记(1)-- 对象的共享
1. 一些原则 RIM(Remote Method Invocation):远程方法调用 Race Condition:竞态条件 Servlet要满足多个线程的调用,必须是线程安全的 远程对象,即通过 ...
- 多个ajax请求下等待条显示和隐藏的简单处理
处理为遇到ajax请求就显示等待条,直到所有的ajax请求执行完毕才关闭等待条.比较简单,源码如下(基于jQuery) //基于jQuery //从第一个ajax请求发出开始显示等待条?直到一系列aj ...
- ES6笔记(1) -- 环境配置支持
系列文章 -- ES6笔记系列 虽然ES6已经发布一年多了,但在各大浏览器之中的支持度还不是很理想,在这查看ES6新特性支持度 Chrome的最新版本浏览器大部分已经支持,在Node.js环境上支持度 ...
- C#+ html 实现类似QQ聊天界面的气泡效果
/**定义两个人的头像*/ Myhead = "<img src=qrc:/chatdemo/Msg/Head.png width='30px'heigth='30px'>&qu ...