vue教程-vue入门-CSDN博客

Vue入门

Vue Hello World

纯HTML实现Hello World

在学习vue之前，我们先通过HTML实现一个Hello World效果。如下：

<!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 的效果。

Vue Hello World

首先我们需要引入js文件

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

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

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

另外{{ message }}一定要被包裹在一个便签中，我们通过div的id就可以获取到这个标签元素，进而通过vue给div中的message 赋值。

组件的概念

在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"
  }
}
复制代码