vue 简介 vue 项目组件

1. 概念

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。能够为复杂的单页应用提供驱动。

2. 用法

2.1 声明式渲染

2.1.1 改变文本 {{ message }} 打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app">

    {{ message }}

  </div>

  <script src="vue.js"></script>

  <script>

    var app = new Vue({

      el: '#app',

      data: {

        message: 'Hello Vue!'

      }

    })

  </script>

</body>

</html>

扩展：

模板渲染方式：

生成的dom 替换了容器内容 #app 又称为挂载点

el:'#app',

template:'<h1>hello {{mes}}</h1>',

data:{

mes:'world'

}

同名数据访问优先级：data - methods - computed

2.1.2 绑定元素特性（属性） v-bind:title="message"

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app-2">

    <span v-bind:title="message">

      鼠标悬停几秒钟查看此处动态绑定的提示信息！

    </span>

  </div>

  <script src="vue.js"></script>

  <script>

    var app2 = new Vue({

      el: '#app-2',

      data: {

        message: '页面加载于 ' + new Date().toLocaleString()

      }

    })

  </script>

</body>

</html>

2.2 条件与循环

2.2.1 条件 v-if="seen" Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app-3">

    <p v-if="seen">现在你看到我了</p>

  </div>

  <script src="vue.js"></script>

  <script>

    var app3 = new Vue({

      el: '#app-3',

      data: {

        seen: true

      }

    })

  </script>

</body>

</html>

2.2.2 循环 v-for="todo in todos" {{ todo.text }}

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app-4">

    <ol>

      <li v-for="todo in todos">

        {{ todo.text }}

      </li>

    </ol>

  </div>

  <script src="vue.js"></script>

  <script>

    var app4 = new Vue({

      el: '#app-4',

      data: {

        todos: [{

            text: '学习 JavaScript'

          },

          {

            text: '学习 Vue'

          },

          {

            text: '整个牛项目'

          }

        ]

      }

    })

  </script>

</body>

</html>

2.3 处理用户输入

2.3.1 处理组件内部数据 v-on:click="reverseMessage"

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app-5">

    <p>{{ message }}</p>

    <button v-on:click="reverseMessage">逆转消息</button>

  </div>

  <script src="vue.js"></script>

  <script>

    var app5 = new Vue({

      el: '#app-5',

      data: {

        message: 'Hello Vue.js!'

      },

      methods: {

        reverseMessage: function () {

          this.message = this.message.split('').reverse().join('')

        }

      }

    })

  </script>

</body>

</html>

2.3.2 双向绑定 v-model="message"

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app-6">

    <p>{{ message }}</p>

    <input v-model="message">

  </div>

  <script src="vue.js"></script>

  <script>

    var app6 = new Vue({

      el: '#app-6',

      data: {

        message: 'Hello Vue!'

      }

    })

  </script>

</body>

</html>

扩展：

input 的自定义双向绑定：：value @input="fn" （等价于 v-model ：语法糖，定义动态数据，然后监听数据变化，fn 实现当前 target.value = this.value）

2.4 组件

2.4.1 静态数据 Vue.component('todo-item', { template: '<li>这是个待办项</li>' }) <todo-item></todo-item>

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app-7">

    <ol>

      <todo-item></todo-item>

    </ol>

  </div>

  <script src="vue.js"></script>

  <script>

    Vue.component('todo-item', {

      template: '<li>这是个待办项</li>'

    })

    var app7 = new Vue({

      el: '#app-7'

    })

  </script>

</body>

</html>

2.4.2 动态数据从父作用域将数据传到子组件 prop

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app-7">

    <ol>

      <!--

            现在我们为每个 todo-item 提供 todo 对象

            todo 对象是变量，即其内容可以是动态的。

            我们也需要为每个组件提供一个“key”，稍后再

            作详细解释。

          -->

      <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>

    </ol>

  </div>

  <script src="vue.js"></script>

  <script>

    Vue.component('todo-item', {

      props: ['todo'],

      template: '<li>{{ todo.text }}</li>'

    })

    var app7 = new Vue({

      el: '#app-7',

      data: {

        groceryList: [{

            id: 0,

            text: '蔬菜'

          },

          {

            id: 1,

            text: '奶酪'

          },

          {

            id: 2,

            text: '随便其它什么人吃的东西'

          }

        ]

      }

    })

  </script>

</body>

</html>

more1:

props 可配置校验规则：

props:{

　　name:{ type:String,require:true,default:'your name' },

　　age:{ type:Number,validator(val){ return val > 0 } }

}

more2:

复杂数据：打包处理

父组件数据结构：mes:{name:'ww',age:'11'} , 子组件传递属性使用 v-bind = "mes" 替代 :name="mes.name" ...

2.4.2.1 实际应用组件呈现形态

<div id="app">

  <app-nav></app-nav>

  <app-view>

    <app-sidebar></app-sidebar>

    <app-content></app-content>

  </app-view>

</div>

2.5 数组的变异方法：动态改变 arr 数据（不能通过改变长度及末尾添加赋值等操作来改变数组）

pop、push、shift、unshift、splice、sort、reverse （vue 内部重写了数组的这几个方法，执行时会添加渲染执行函数）

对象的改变方式：vm.$set ( vm.$set(obj,name,val) )

2.6 扩展：

vue dom的渲染是异步的，渲染完成函数 vm.$nextTick()

ref = 'idName' - this.$refs['idName'] ( ele ) \ vue 实例

3. 相关文章

vue 简介 vue 项目组件的更多相关文章

Vue项目中使用基于Vue.js的移动组件库cube-ui
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
vue - vue-cli脚手架项目中组件的使用
在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...
vue.js+koa2项目实战（五）axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
Vue环境搭建-项目的创建-启动生命周期-组件的封装及应用
vue项目环境的搭建 """ node >>> python:node是用c++编写用来运行js代码的 npm(cnpm) >>> p ...
基于Vue的工作流项目模块中，使用动态组件的方式统一呈现不同表单数据的处理方式
在基于Vue的工作流项目模块中,我们在查看表单明细的时候,需要包含公用表单信息,特定表单信息两部分内容.前者表单数据可以统一呈现,而后者则是不同业务的表单数据不同.为了实现更好的维护性,把它们分开作为 ...
【vue】vue +element 搭建项目，组件之间通信
父子组件通信父通过props属性给子传递数据子操作父 this.$parent.XXX 子通过$emit传递参数或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可 ...
中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架（asp.net core 2.X+Vue）模板项目学习之路（一） C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明如何在IIS上发布，并能正常访问
中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...
01 . Vue简介,原理,环境安装
简介 vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.它是轻量级的,它有很多独立的功能或库 ...

随机推荐

ES6 字符串的扩展(待细读)
1.确定字符串中是否含有某个字符串 indexof(value,num):可返回某个指定的字符串值在字符串中首次出现的位置.ES5方法,num范围(0~length-1) includes(value ...
【python】小型神经网络的搭建
import numpy as np def sigmoid(x): # Sigmoid activation function: f(x) = 1 / (1 + e^(-x)) return 1 / ...
七、smarty--缓存的控制
1.建议缓存 $smarty->cacheing = true; //设置为2是给每一个模板设置缓存 $smarty->setCacheDir(“”); 2.处理缓存的生命周期 $smar ...
What is the !! (not not) operator in JavaScript?
What is the !! (not not) operator in JavaScript? 解答1 Coerces强制 oObject to boolean. If it was falsey ...
使用relo
安装好插件以后,选择一个工程,右键点击relo connection(如果已经连接了就不需要点击).点击navigate,open relo session,选择一个文件,可以打开这个文件的类图,点击 ...
第五周作业，LVM和TCP
1.磁盘lvm管理,完成下面要求,并写出详细过程: 1) 创建一个至少有两个PV组成的大小为20G的名为testvg的VG;要求PE大小为16MB, 而后在卷组中创建大小为5G的逻辑卷testlv; ...
flutter image_picker
点击选中图片,底部弹窗让用户选择使用相册还是相机,用户选中选项后,跳转到对应的相册或者相机功能,结果将图片显示出来 image_picker: ^0.6.1+4 iOS使用image_picker需要 ...
ControlTemplate in WPF —— Window
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...
MySQL 树形结构根据指定节点获取其下属的所有子节点（包含路径上的枝干节点和叶子节点）
背景说明需求:MySQL树形结构, 根据指定的节点,获取其下属的所有子节点(包含路径上的枝干节点和叶子节点) 枝干节点:如果一个节点下还有子节点,则为枝干节点. 叶子节点:如果一个节点下不再有子节点 ...
hadop-eclipse-plugin导入plugins后没有mapreduce视图
这种现象一般由于安装在eclipse\plugins下的插件没有导入的问题. 解决方法:把 eclipse\configuration\org.eclipse.update 删除掉.出现这种情况的原因 ...

vue 简介 vue 项目 组件

vue 简介 vue 项目 组件的更多相关文章

随机推荐

热门专题

vue 简介 vue 项目组件

vue 简介 vue 项目组件的更多相关文章