此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助。

什么是Vue?

Vue.js (读音 /vjuː/,类似于 view)
是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue
采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue
生态系统支持的库
结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

学习Vue需要掌握HTML、CSS 和 JavaScript 中级前端知识,如果是前端初学者不建议学习Vue。

安装与语法

安装

Vue的安装有多种方法,具体安装参考官方文档Vue安装选项
本文中的示例采用最简单的的一种安装方式,即在html文件中直接引入。代码如下:
<script src="https://unpkg.com/vue"></script>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统:
<div id = "root">{{message}}</div>
new Vue({
el:'#root',
data:{
message:'Hello World!'
}
})

指令

几个常用的vue指令
  • v-bind
  • v-if  v-else-if v-else
  • v-for
  • v-on
  • v-model
  • v-html
下面通过代码简单了解
html代码:
<div id = "root">

	<div v-bind:title="message">{{message}}</div>

	<!--v-for遍历数组或对象,value为值,index是下标-->
<ul>
<li v-for="(value,index) in courseList">{{index}}/{{value}}</li>
</ul> <!--v-if 判断语句,值如果为false,删除dom节点-->
<div v-if="isShow">{{hideInfo}}</div> <!--v-on 绑定事件-->
<button v-on:click="showFunc">{{btnInfo}}</button> <!--v-model 实现表单输入和应用状态之间的双向绑定-->
<input type="text" v-model="username"/>{{username}} <!--为元素设置html-->
<div v-html="username"></div> </div>

js代码:

new Vue({
el:'#root',
data:{
message:'Hello Vue!',
isShow:true,
hideInfo:"我是一个隐藏的块",
btnInfo:'显示隐藏',
courseList:[
'yiyiyi',
'ererer',
'sansansan'
],
username:'cheng'
},
methods:{
showFunc:function(){
this.isShow = !this.isShow;
}
}
})

网页显示结果




此时通过点击按钮是可以控制按钮上方块的显示隐藏的。
v-model实现实现表单输入和应用状态之间的双向绑定。
在input中输入值,所有应用了username的元素,都会发生变化。如下图:

v-if vs v-show

与元素的显示隐藏相关的指令还有v-show。v-show和v-if的显示隐藏是不同的。
v-show是隐藏元素 为元素添加display:none,保留dom节点;而v-if的通过false隐藏是删除dom节点。

那什么时候用v-if,什么时候用v-show呢?

官方给了建议

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

component模板

这个功能很强大,可以自定义html模板。
直接看代码:
<div id = "root">

	<div>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div> </div>
Vue.component('my-component',{
template:'<div>Hello</div>'
})

结果


这篇文章就先整理到这里,后续还会发布我的Vue的笔记。




Vue学习笔记-Vue基础入门的更多相关文章

  1. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  2. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  3. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  4. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  5. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  6. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  7. Vue 学习笔记之快速入门篇

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与 ...

  8. Vue学习笔记:基础

    Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的 插值 数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值 指令 指令的定义:Direct ...

  9. Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)

    脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...

随机推荐

  1. win 7 系统ie浏览器升级11版本后,f12功能不可用的问题

    自从把ie8升级成11后,f12功能就不可用了.浏览器兼容模式也无法使用. 解决办法:下载windows补丁 IE11-Windows6.1-KB3008923-x64.msu 下载地址: 64位:h ...

  2. 百度的js日历

    <title>百度的Js日历,值得一看</title> <style> body,td,.p1,.p2,.i{font-family:arial} body{mar ...

  3. 强大的grep,sed和awk--用案例来讲解

    准备工作: 先简单了解grep,sed和awk功能 1) grep 显示匹配特定模式的内容 grep -v 'boy' test.txt 过滤掉test.txt文件的boy,显示其余内容 grep ' ...

  4. EasyUI Dialog 窗体 布局记要

    通常在窗体里放置的都是表单,或者使用分栏(Tab)来陈列信息也是非常的好用.在这里特别记录一下在窗体里同时放置表单和表格的设计思路. 仅放置一个表单 通常 Dialog 里只放一个表单,而且表单的行数 ...

  5. Hibernate 学习笔记 - 1

    一.Hibernate 的环境搭建.配置及 HelloWorld 1.在 Eclipse 中搭建 Hibernate 环境 下载 Hibernate 离线 jar 包(jbosstools-4.4.4 ...

  6. 简述static关键字、void与void *(void指针)、函数指针

    static关键字1.修饰局部变量,延长局部变量的生命周期.使变量成为静态局部变量,在编译时就为变量分配内存,直到程序退出才释放存储单元.2.修饰全局变量,限制全局变量的使用范围为本文件中.全局变量默 ...

  7. bind、apply与call

    bind.apply与call 先说观点:不论是bind.apply还是call,最大的好处就是代码复用. bind 在开发中,我们只有复用代码时,才会出现this指向需要改动的情况. 纵观bind的 ...

  8. win10 UWP 序列化

    将对象的状态信息转换为可以存储或传输的形式的过程.在序列化期间,对象将其当前状态写入到临时或持久性存储区.以后,可以通过从存储区中读取或反序列化对象的状态,重新创建该对象. .NET Framewor ...

  9. Linux入门(11)——Ubuntu16.04安装texlive2016并配置texmaker和sublime text3

    安装过程中需要调用 Perl 的模块 Digest::MD5 来检测 ISO 文件的完整性:升级过程中界面需要调用 Perl 的模块 Tk: sudo apt-get install libdiges ...

  10. sublime中安装package control总是失败

    今天下载了个sublime编辑器,要运行vue文件,想让vue也能高亮显示,在网上搜了一下如何安装.但总是提示控制器没有安装Package Control:There are no packages ...