一、引言

本文为个人在学习vue时总结的学习笔记，不得转载，跳过对最基础部分的总结，第一次编写请多包涵，本人将在之后的学习时间里持续更新。

二、视图和数据的双向绑定 - - - v-model

双向绑定：当用户再对视图进行操作修改的时候，对应的数据部分也会改变，同时数据部分的改变也能够改变视图所渲染的内容。

注意: v-model 会忽略所有表单元素的value、checked、selected 特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!

视图：可视化html元素生成的网页

 <div><h1>Square inch chessboard is my world(方寸棋盘 便是我的天地)</h1>输入的文本：<input type="text" v-model="message"> {{message}}<div><h1>---请选择---</h1><input type="radio" name="sex" value="男" v-model="sex">男<input type="radio" name="sex" value="女" v-model="sex">女<br/>你选择了：{{sex}}</div><div><select v-model="selected"><option value="" disabled>---请选择---</option><option>黑子深邃 为长夜苍茫莫测</option><option>白子耀眼 若恒星亘古不变</option><option>舍弃 也是种取胜之道</option></select>你选择了：{{selected}}</div></div>

数据：将要展示的相关信息

 data () {return {message: '',sex: '男',selected: ''}}

三、组件 - - - component

组件：组件是可复用的vue实例，说白了就是一组可以重复使用的模板，跟JSTL 的自定义标签、
Thymeleaf 的 th:fragment等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织

创建组件的基本格式

Vue.component('组件名', {/*....*/template: 'html代码'
})

自定义组件的使用

<自定义组件名 /*....*/></自定义组件名>

我的小“栗子”

import Vue from 'vue'Vue.component('yichangsu', {props: ['taici'],template: '<li>{{taici}}</li>'
})export default{data () {return {message: '',sex: '男',selected: '',items: ['Ten meetings in one effort(一力降十会)', 'What is familiar on the chessboard is Yin and Yang(棋盘上熟悉的 除去输赢 还有阴阳)', 'The chess pieces will decide who will live to the end(棋子会决定 谁才是活到最后的存在)']}}
}

四、其它

附上b站学习视频地址：https://www.bilibili.com/video/BV18E411a7mC?p=1

若文中出现错误，望各位批评指正！

VUE学习笔记------奕长苏相关推荐

day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念文章目录 1. MVVM模式的实现者 2.第一个vue程序 3.什么是mvvm? 4.为什么要用mvvm? 5.mvvm的组成部分 7.MVV ...
vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习文章目录 vue学习笔记-01-前端的发展历 ...
vue学习笔记之：为何data是一个方法
vue学习笔记之:为何data是一个方法在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
好程序员教程分析Vue学习笔记五
好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用.在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径. 注意:在Vue中,要使用路由, ...

VUE学习笔记------奕长苏