阅读 60

vue教程-vue入门

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

  1. 首先我们需要引入js文件

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    复制代码
  2. 修改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元素进行操作了。

  3. 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变量赋值。

  4. 网站页面代码

    <!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>
    复制代码
  5. 页面效果

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

  1. cdn的方式
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
复制代码
  1. 下载引入js文件

  2. 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 一键生成 使用默认项 包名是当前文件夹的名字
  ~~~
复制代码
  1. 安装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"
      }
    }
    复制代码

关注下面的标签,发现更多相似文章
评论