vue教程-vue入门

时间 2019-11-07

标签 vue 教程入门繁體版

原文原文链接

Vue入门

Vue Hello World

纯HTML实现Hello Worldjavascript

在学习vue以前，咱们先经过HTML实现一个Hello World效果。以下：css

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>learn-vue</title>
  </head>
  <body>
Hello World
  </body>
</html>
复制代码

如此咱们就获得了一个Hello World的效果。接下来咱们使用Vue.js实现 Vue Hello World 的效果。html

Vue Hello Worldvue

首先咱们须要引入js文件java

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
复制代码

修改HTML页面node
```
<div id="app">
      {{ message }}
    </div>
复制代码
```
{{ message }} 是vue的一个语法，message 是一个自定义的变量，一下子咱们经过在js代码中经过vue给该变量赋值为Vue Hello World，这样{{ message }} 就会显示为Vue Hello World了。ios

{{ }} 在页面标签中自定义变量用于输出对象属性和函数返回值ajax

另外{{ message }}必定要被包裹在一个便签中，咱们经过div的id就能够获取到这个标签元素，进而经过vue给div中的message 赋值。vue-router

组件的概念vuex

在vue中，会把页面上的每个标签（dom元素）称之为一个组件，针对每一个组件咱们均可以经过vue在js代码中建立一个vue对象，经过操做这个对象就能够对该dom元素进行操做了。
js代码
```
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
复制代码
```
vue中的组件由html模板+js脚本+css样式组成，css样式是可选项

在咱们当前的代码中没有添加样式，经过html获得一个dom元素，vue经过id选择器获取到这个元素，给元素中的message 赋值。

new Vue表示创建一个dom所对应的抽象对象。el属性决定了咱们要经过选择器选择哪一个标签，也就是要创建哪一个标签的vue对象。

此处咱们经过id选择器建立了div标签的vue对象，经过对象的data属性能够给标签中定义的vue变量赋值。

网站页面代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>learn-vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>

	<div id="app">
      <p>{{ message }}</p>
    </div>
  </body>
  
  <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script>
</html>
复制代码

页面效果

Vue简介

什么是Vue

一套构建用户的渐进式框架

框架：vue 拥有完整的解决方案

库：jQuery easyUi

渐进式：经过组合完成一个完整的框架 vue全家桶 vuejs+ vue-router + vuex + axios 能够自由组合

特色

核心值关注视图层 view
简单小巧
适用于移动端项目
渐进式框架

Vue和JQuery的区别

咱们先写一段jQuery的代码

<div id='app'>
    
</div>

<script>
if(showBtn){
    var btn = $('<button>Click me</button>');
    btn.on('click,function(){
           console.log('Clicked!');
           }');
	$('#app').append(btn);
}
</script>
复制代码

经过Jquery咱们给div标签中添加了一个button，这个button拥有一个点击事件。

Vue代码

<body>

	<div id="app">
      <button v-if="showBtn" v-on:click="handleClick">
      	 Click me
      </button>
    </div>
  </body>
  
  <script> new Vue({ el: '#app', data: { showBtn: true }, methods:{ handleClick:function(){ console.log('Clicked!'); } } }) 复制代码

咱们能够注意到，在Jquery代码中，数据和视图（html）代码是耦合在一块儿的。可是在Vue中，在js代码中不须要关心html的代码，只须要操做数据便可。而且经过Vue对象，data属性，methods让vue的代码更加的符合面向对象的编程方式。

MVC 单向

model 数据 ajax获取到的json数据转换的js对象

view 视图

controller 控制器

MVVM模式双向绑定

下图不只归纳了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。

**ViewModel是Vue.js的核心，它是一个Vue实例。**Vue实例是做用于某一个HTML元素上的，这个元素能够是HTML的body元素，也能够是指定了id的某个元素。

当建立了ViewModel后，双向绑定是如何达成的呢？

首先，咱们将上图中的DOM Listeners和Data Bindings看做两个工具，它们是实现双向绑定的关键。从View侧看，ViewModel中的DOM Listeners工具会帮咱们监测页面上DOM元素的变化，若是有变化，则更改Model中的数据；从Model侧看，当咱们更新Model中的数据时，Data Bindings工具会帮咱们更新页面中的DOM元素。

Vue基本使用

安装Vue

cdn的方式

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
复制代码

下载引入js文件
npm安装 node package manager 能够类比maven

npm使用
1. 安装npm
  
  安装教程：http://www.runoob.com/nodejs/nodejs-install-setup.html
2. 经过命令使用npm
```
npm init 初始化 在当前目录下生成package.json 这个文件用来描述项目依赖（相似pom文件）
复制代码
```

剩余所有选择默认便可

  ~~~
  npm init -y 一键生成 使用默认项 包名是当前文件夹的名字
  ~~~
复制代码

安装vue

npm install vue 默认下载最新版本
复制代码

下载好的package.json

注意：package.json中不能写注释

{
  "name": "testvue",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "description": "",
  "dependencies": {
    "vue": "^2.6.8"
  }
}
复制代码