vue学习之路 - 1.初步感知

一、安装

  这里使用node的npm包管理工具进行操作。操作前请先下载node。

  在工程文件夹中使用以下命令安装vue:

npm install vue

  如下图所示:我在 helloworld 文件夹中安装vue:

  

  //  Vue不支持IE8及其以下版本,因为Vue使用了IE8不能模拟的ECMAScript5特性。Vue.js支持所有兼容ECMAScript5的浏览器。

  

二、Vue初步感知

1、Hello World

初步认识:vue相当于一个高级的模板引擎

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>vue-Hello World</title>
 6 </head>
 7 <body>
 8   <!--
 9     0. 引包
10     1. new Vue() 实例化 Vue 应用程序
11     2. 根据你的视图界面配置 data 数据
12     3. 通过 el 选项配置需要用 vue 管理的 DOM 节点入口
13   -->
14   <script src="node_modules/vue/dist/vue.js"></script>
15   <div id="app">
16     <h1>{{ message }}</h1>
17   </div>
18
19  <!-- 1. new Vue() 实例化 Vue 应用程序 -->
20   <script>
21     // 高级模板引擎
22     new Vue({
23       el : ‘#app‘ ,    // el 是element 元素的意思
24       data : {         // 数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。
25         message : ‘hello vue.js‘    // 根据你的视图界面配置 data 数据
26       }
27     });
28   </script>
29   <!-- Vue 你就把当做一个高级的模板引擎,在 data 中的数据,就可以直接在被 vue 管理的DOM中,直接通过模板语法来使用 -->
30 </body>
31 </html>

HelloWorld-代码

el:绑定DOM元素,绑定规则:一般都是你哪些DOM需要被vue所管理,那么你就绑定这些DOM元素所在的DIV。

代码运行结果:

2、vue中的数据是响应式的

数据变化页面会自动更新。

  

如上图,拿到vue实例后,我们可以直接通过vue对象实例,来访问操作data中的数据成员。

3、数据绑定:

一般的标签绑定数据都是通过 {{ }} 就可以做到。如上面的例子。

但是表单元素比较特殊,在vue中需要使用v-model来进行绑定。

如:

 <input type="text" v-model="message">

v-model//自定义标签特殊属性,HTML不识别,但是vue会识别。

双向数据绑定:

v-model 是 Vue 提供的一个特殊的属性,在 Vue 中被称之为指令

它的作用就是:双向绑定表单控件

什么是叫双向数据绑定?

当数据发生改变, DOM 会自动更新

当表单控件的值发生改变,数据也会自动得到更新

  如下图:

  

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-表单元素双向数据绑定</title>
</head>
<body>
  <script src="node_modules/vue/dist/vue.js"></script>
  <div id="app">
   <!--
      表单元素比较特殊,在 vue 中需要使用 v-model
      这个特殊的 HTML 属性(vue指令)
    -->
    <h1>{{ message }}</h1>
    <input type="text" v-model="message">

    <h2>{{ foo }}</h2>
    <input type="text" v-model="foo">

    <h3>{{ apple }}</h3>
    <input type="text" v-model="apple">
  </div>
  <script>
    var app = new Vue({
      el : ‘#app‘ ,
      data : {
        message : ‘hello vue.js‘,
        foo : ‘fooMessage‘,
        apple: ‘appleMessage‘
      }
    });
    console.log  (app.message);
  </script>
</body>
</html>

数据双向绑定例子源码

4、事件绑定:

我们可以通过被vue管理的模板中使用方法绑定使用:

v-on:事件名称="methods中的方法名称"的方式来为其注册特定的事件处理函数

如图所示:

    

初步认识:

目前我们发现Vue给我们带来最大的一个好处是,:不需要DOM操作了(vue内部解决)

还有就是Vue其实就是一个更高级的模板引擎。

  • 在页面中具有被Vue管理的程序(DOM)入口(不能是html、body)
  • 通过new Vue创建Vue应用程序实例
  • 把页面中所有要操作的DOM,通过数据绑定的方式来处理

 ■ 在data中声明:

    ■ 在模板中通过特殊的语法来使用

     ◆ {{ }}使用在非表单元素、h1、p等

     ◆ v-model=””使用在表单元素

   ■ 处理事件的方式

     ◆ 在methods中定义方法

     ◆ 在模板中通过v-on:事件名称="methods中的方法名称"的方式来注册特定的事件处理函数

   ■ 通过el选项来声明被Vue管理的模板入口

    ◆ 不能是html和body

    ◆ 是普通元素节点

  • 在Vue中,通过模板绑定的数据都是响应式的

   ■ 数据如果一旦变化,则绑定该数据的视图元素也会得到改变

   ■ 视图元素一旦变化,则绑定的数据也会跟着改变。

原文地址:https://www.cnblogs.com/ming75/p/9369666.html

时间: 2024-10-30 08:57:00

vue学习之路 - 1.初步感知的相关文章

vue学习之路二 初步接触vue-router

今天把vue-router继续下去: 还是跟这个外国网友的学习教程走的.想想也是挺那啥的:国内的东西没有找到相对比较满意是教程反倒是朋友介绍的国外的教程好一点--不多扯上地址:https://scotch.io/courses/build-an-online-shop-with-vue/introduction(或许是有的,但是我真的没有找到--) 目前是这个配置:router文件夹:如其名:是对路由 的一个配置:  类似小程序的app.json里面配置上所有页面的路径. components这

vue学习之路 - 4.基本操作(下)

vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 v-if v-else v-else-if v-for v-on v-bind v-model 以上指令前面都已说明其作用,并且使用过,这里将不再赘述. 下面我们看看 vue 的一些其他常用指令的用法: 在学习 v-text 和 v-cloak 之前我们先看看{{ }}的使用所存在的问题. {{

后端开发者的Vue学习之路(二)

目录 上篇内容回顾: 数据绑定 表单输入框绑定 单行文本输入框 多行文本输入框 复选框checkbox 单选框radio 选择框select 数据绑定的修饰符 .lazy .number .trim 样式绑定 class绑定 对象语法: 数组语法: style绑定 对象语法: 数组语法: 补充: 事件 绑定事件 事件修饰符 按键修饰符 事件绑定的简写 补充: Vue指令 数组操作 官网的话 补充: Vue的元素复用问题 数据残留问题 问题的解决: 首发日期:2019-01-20 上篇内容回顾:

Vue学习之路---No.2(分享心得,欢迎批评指正)

昨天我们大致了解了有关Vue的基础知识和语法:今天我们继续在大V这条路上前进. 首先,我们回忆一下昨天提到的相关知识点: 1.了解Vue的核心理念------"数据驱动视图" 2.了解Vue的特色功能-------"双向绑定" 3.了解Vue的基础语法-------"{{bigSurprise}},el:'',data{},vm.project,method{},等 首先,昨天我们提到了很好用的双向绑定,但是如果在某些情况下我们不需要双向绑定应该怎么办呢,

Vue学习之路---No.6(分享心得,欢迎批评指正)

我们还是先回顾一下上一次的重点: 1.事件绑定,我们可以对分别用方法和js表达式对事件进行处理 2.当方法名带括号的时候,在方法中一定要传参:而不带括号的时候,vm会自动配置默认event 3.各类事件修饰器 之前我们提到过表单绑定,那么现在我们来深入了解一下,Vue这一令人惊奇的双向表单绑定功能: 直接进入正题: <input v-model=" message "> <p>{{ message }}</p> 这是最简单的表单双向绑定,标签P中的值

Vue学习之路第八篇:事件修饰符

学习准备: ①.顾名思义,"事件修饰符"那么肯定是用来修饰事件,既然和事件有关系,那么肯定和"v-on"指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .prevent:阻止默认事件 .capture:事件捕获 .self:只当事件在该元素本身触发时触发回调 .once:事件只触发一次 1.阻止冒泡 页面代码: <div id="app" @click="clickDiv()">

vue学习之路一:安装vue-element-admin项目

今天看到一个vue网站,觉得很好,立马又有学习vue的冲动了,话不多说,直接贴项目网址: https://github.com/PanJiaChen/vue-element-admin/blob/master/README.zh-CN.md 根据文档,第一步就是安装项目啦! # 克隆项目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 进入项目目录 cd vue-element-admin # 安装依赖 npm in

vue学习之路之需要了解的知识汇总

一.vue是什么? 相关网页:  https://vuejs.bootcss.com/v2/guide/       及菜鸟教程       https://www.runoob.com/vue2/vue-tutorial.html vue.js是一套构建用户界面的渐进式框架:它只关注图层,采用自底向上增量开发的设计:它的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件.vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用.其实抛开官方的一些不知所云的说

Vue学习之路1-集成环境安装

1.前言 Vue 是一款友好的.多用途且高性能的javascript框架,与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,它能够帮你创建可维护性和可测试性更强的代码库,Vue是渐进式的javascript框架库. 2.安装简介 Vue集成环境三大核心组件:node.js,npm,vue. 3.node.js安装 下载地址:https://nodejs.org/en/download/,根据操作系统选择实际需要的后缀名为.msi快捷安装包进行安装.node工具安装包括了npm工具,安