Vuejs入门和使用实践

阅读量：4298 次

发布时间：2019-05-27

本文共 4858 字，大约阅读时间需要 16 分钟。

Vue.js 入门和使用实践

一、软件版本

Vue版本：2.x

官网：https://cn.vuejs.org

编程工具：HBuilder X

二、文档指引

基础知识 -> 案例实践 -> TodoList -> Vue-cli -> Todolist

三、Vue基础语法

1.创建第一个Vue实例

HBuilder X 菜单 -> 视图 -> 显示项目管理器 -> 将 Vue 文件夹拖进来

进入官网 -> 学习 -> 教程 -> 安装 -> 直接引用

			
   		Vue 入门		
   						
   
    {
  {msg}}

2.挂载点、模板与实例

挂载点、模板和实例之间的关系

实例和挂载点的关系

Vue 实例通过 el 属性绑定挂载点

id=“root” 的 div 是 Vue 实例的挂载点

Vue 实例只处理挂载点下的数据绑定

挂载点和模板的关系

挂载点下的内容称为模板或模板内容

模板内容可以在初始化 Vue 实例时定义 template 属性

			
   		Vue 入门		
   						
   		
   			
    			
    h1-msg = {
  {msg}}
		
   
				
   		
   
    {
  {msg}}

3.Vue实例中的数据、事件和方法

{
{ }} 称为插值表达式

v-text 指令（适合纯文本）

v-html 指令（适合需要添加 html 标签）

模板指令 v-on: 表示事件绑定, click 表示绑定点击事件，执行的方法，需要在 Vue 实例中定义 methods 属性（v-on 可以简写为 @ ，例如：@click 表示点击事件）

更改数据的显示时，并不需要操作 dom，而是修改变量值，变量值修改后，Vue 会自动更新页面数据（由面向 dom 编程，变成面向数据编程）

4.Vue中的属性绑定和双向数据绑定

模板指令 v-bind: 表示属性绑定, title 是 div 标签的属性名，绑定的数据，在 Vue 实例的 data 属性中设置（v-bind 可以简写为 : ，例如：:title 表示绑定 title 属性）

单项绑定：Vue 实例对象中的数据决定了页面显示的内容，而页面无法修改数据

模板指令 v-model 表示标签属性值和 Vue 实例中 data 属性的变量进行双向绑定，当 input 标签内容发生变化，相应绑定的 Vue 实例中 data 属性的变量也会发送变化

			
   		Vue 入门		
   						
   			
    
     Hello World
    			
    			
    
     Hello World
    			
    			
    			
    			
    
     {
  {content}}

5.Vue中的计算属性和监听器

Vue 实例中定义 computed 属性，在 computed 属性中，实现计算属性的方法

- （计算属性是通过其它属性计算出来的值）
- （只有当计算属性的方法中的属性发生变化的时候才会重新计算，否则使用上一次计算的缓存）

Vue 实例中定义 watch 属性，在 watch 属性中，定义需要监听的属性和执行方法的内容（用于监听数据或计算属性的变化，当发生变化时，执行对应的方法）

			
   		Vue 入门		
   						
   
    			姓：
    			名：
    			
    
     {
  {fullName}}
    
			
    
     {
  {count}}

6.v-if、v-show与v-for指令

v-if 指令表示是否从 dom 节点中删除指定的标签

v-show 指令表示是否通过 css 的 display 来隐藏标签

v-for 指令表示循环列表数据（可通过定义 :key 提升 for 循环的性能，key值不能相同；如果需要频繁的对列表进行变更，key值会有所讲究）

			
   		Vue 入门		
   						
   			
    
     hello world
    
			
    
     Hello World
    
			
    			
    				
     				
     {
  {item}}

四、Vue中的组件

1.Todolist 功能开发

input 标签和 Vue 实例的数据变量做双向绑定(v-model)，ul 标签中循环一个列表(v-for)，【提交】按钮绑定点击事件(@click)，事件方法中，向 list 中 push input 标签填写的内容

2.Todolist 组件拆分

将一个复杂的页面拆分成多个组件，每个组件独立维护

组件之间通信（参数的传递）

定义组件在 Vue 实例之前

全局组件定义：Vue.component()

局部组件定义：带 template 属性的对象，并且使用 Vue 实例的 components 属性中声明组件

通过定义的组件名称，在模板中以组件名称标签进行使用

			
   		Vue 入门

3.组件与实例的关系

一个组件就是一个 Vue 的实例（因为组件中也可以使用 Vue 实例的属性，例如：methods）

对于父组件（Vue 实例），如果没有指定 template 属性，它会把挂载点下的内容当成模板使用

			
   		Vue 入门

4.实现Todolist的删除功能

父组件给子组件传值，是通过属性进行传递的

子组件将父组件的定义数据进行删除（通过发布订阅模式进行实现；子组件发布事件，父组件自动订阅这个事件）

子组件点击 item 时，触发子组件自定义 delete 属性，delete 属性会调用父组件定义的方法，在方法中执行删除数据的操作

通过上面描述，自定义的 delete 属性，更像是自定义了一种事件类型，可以调用父组件方法的事件类型

			
   		Vue 入门

五、Vue-cli

1.vue-cli的简介与使用

Vue 脚手架工具 = vue-cli，快速构建标准的 vue 项目目录，自带 webpack 的各种配置

安装

安装 Node.js 【https://www.runoob.com/nodejs/nodejs-install-setup.html】

进入官网 -> 学习 -> 教程 -> 安装 -> 命令行工具（CLI）-> Vue CLI 的文档 -> Getting Started

使用 npm 创建

$ npm install -g @vue/cli

$ vue create vue-project

$ cd vue-project
$ npm run serve

使用 webpack 创建

$ npm install -g @vue/cli-init

$ vue init webpack my-project

$ cd my-project
$ npm run dev

最外层的 index.html 是项目入口，其中

为挂载点，Vue 实例创建在 src/main.js 中，模板内容在 src/app.vue 中

单文件组件，既一个文件里包含了所有组件内容（.vue 文件，文件包含 template、script、style）

项目中自动配置 webpack 的热加载功能（保存页面触发）

支持 ES5 和 ES6 代码

2.使用vue-cli开发Todolist

当运行 npm run dev 时，npm会加载项目的 package.json 中的 dev 参数

“scripts”: {

“dev”: “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”,
“start”: “npm run dev”,
“unit”: “jest --config test/unit/jest.conf.js --coverage”,
“test”: “npm run unit”,
“lint”: “eslint --ext .js,.vue src test/unit”,
“build”: “node build/build.js”
}

拷贝改名 src/App.vue 为 src/TodoList.vue（data 变成函数）

修改对应 src/main.js 的引用

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import TodoList from './TodoList.vue'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  components: { App:TodoList },  template: '
   '})