随笔分类 - Vue.js
摘要:1.Prop 1.1 Prop的大小写 HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> </style> <script src="https:
阅读全文
摘要:1.组件注册 我们使用Vue.component注册组件,Vue.component的第一个参数就是组件名。 Vue.component('my-component-name', { /* ... */ }) W3C规范的自定义组件名,其字母全小写且可以包含连字符-。 使用上面的自定义组件的方式是<
阅读全文
摘要:1.安装NPM NPM是包管理工具,使用命令行工具创建Vue项目之前先要通过NPM安装vue-cli。 所以先验证本地是否安装了Node.js和NPM。 2.创建Vue项目 安装好NPM后,安装vue-cli只需在命令行窗口输入npm install --global vue-cli,按回车即可。
阅读全文
摘要:1.组件基础 1.1 组件的复用 组件是可复用的Vue实例。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> </style> <script src="https://cdn.staticfile.org/vue/2.4.2
阅读全文
摘要:1.表单输入绑定 你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。 v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。 1.1 文本 <!DOCTYPE h
阅读全文
摘要:1.事件处理 1.1 监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> </style> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></
阅读全文
摘要:1.列表渲染 1.1 v-for <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> </style> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"><
阅读全文
摘要:1.条件渲染 1.1 v-if、v-else-if、v-else <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .base { color: 'blue'; font-size: 30px; } .override { co
阅读全文
摘要:1.绑定Class 1.1 对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #app>div { width: 100px; height: 100px; margin-bottom: 5px; background
阅读全文
摘要:1.创建一个Vue实例 通过Vue函数创建一个Vue实例。 var vm = new Vue({ // 选项 }) 当创建一个 Vue 实例时,你可以传入一个选项对象。 一个 Vue 应用由一个通过new Vue创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。 2.数据与方法 <!DO
阅读全文