基本操作(上)

本章节简介:

    vue的安装

    vue实例创建

    数据绑定渲染

    表单数据双向绑定

    事件处理

安装

  安装方式有三种:

    一、vue官网直接下载

     http://vuejs.org/js/vue.min.js

    二、使用CDN方法

  1. BootCDN(国内) :https://cdn.bootcss.com/vue/2.2.2/vue.min.js, (国内不稳定)
  2. unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。(推荐使用)
  3. cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js,如(<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>)

    二、使用node.js的npm包管理工具下载

npm install vue

Vue实例

    new Vue({
el : ' ' ,
data : { },
methods : { }
}
});

 vue实例中几个最基本的属性el、data、methods,作用如下:

 - el

    ■ 指定被Vue管理的模板入口,网页中的DOM节点

    ■ 作为模板入口的DOM节点不能是body、html

    ■ 必须是一个普通的HTML标签节点,一般是某个 div

 - data

    ■ 作用:数据驱动试图中的数据

    ■ 不是什么数据都往里面初始化的,一般是根据你的视图来初始化使用:数据驱动视图功能的数据

    ■ data中的成员一般叫做和视图交互的响应式数据成员

    ■ 以前想要操作DOM,必须给DOM起一个id搞一个标识。现在不需要了,只需要在data中初始化一个数据成员,然后再模板中绑定使用这个成员,我们就可以通过修改数据的方式来改变视图显示

    ■ 核心就是把DOM操作思想转变成“数据驱动视图”

 - methods

    ■ 一般用来定义事件处理函数

    ■ 虽然我们可以把方法写到data中,但是在Vue中更推荐把所有方法都写到methods属性中。因为这样做更加合理,数据和方法分开,分门别类。

    ■ 注意:methods中不允许有和data中重名的成员

数据绑定渲染

文本绑定:{{ }}

 - mustache语法 ( 八字胡 ) ,中括号括号里面可以是数据变量或者表达式

  示例:

<h1>{{ message }}</h1>

属性绑定:v-bind

  - 完整写法: v-bind:属性名称=”数据变量或表达式”

  - 简写方式: :属性名称=”数据变量或表达式”

示例:

    <!-- 完整写法 -->
<input type="text" v-bind:value="message">
<!-- 简写 -->
<input type="text" :value="message">

下面举例:数据和属性绑定的几种用法和常见错误:

    <!-- 下面以data中的message的各种绑定形式举例: -->
<!-- 普通文本数据绑定 -->
<!--
正确绑定方式
-->
<h1>{{ message }}</h1> <!--
错误绑定方式 : 这里表示的是字符串 message
{{ }}内不需要加引号,如果加了引号,就会把 message当做字符串处理,而不是data中的数据成员
-->
<h1>{{ 'message' }}</h1> <!-- 这里表示的是数字 123 ,不和任何数据有关联 -->
<h1>{{ 123 }}</h1> <!-- 属性绑定方式 -->
<!--
错误的用法,属性绑定需要用 v-bind 指令进行绑定,而不能使用八字胡语法
-->
<h1 foo="{{ message }}">测试文本</h1> <!--
正确的属性绑定方式: 完整写法(简写去掉 v-bind 只用冒号即可)
-->
<h1 v-bind:foo="message">测试文本</h1> <!--
错误的绑定方式 : 同理这里表示的是字符串
-->
<h1 v-bind:foo="'message'"></h1>

上面所说的表达式,是指一些简单的Java Script表达式,如下所示:

    {{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id "></div>>

注意:普通的文本数据绑定和属性绑定都是单向绑定

  • 数据改变,视图跟着变
  • 视图改变,数据不变

对有些特殊属性,作用方式有所不同,如 class 和 checked

特殊属性class:

  • v-bind:class=”{类名:布尔值}”

    ■ 当布尔值为true的时候,这作用这个类名

    ■ 当布尔值为false的时候,这去除这个类名

基本操作如下:

    <!-- 当item.done 为true的时候,类 complete 就对当前 <li> 起作用 -->
<li v-bind:class=" { complete : item.done } ">
<a href="">{{ item.title }}</a>>
</li>

特殊属性checked

         checked在html标签中只要有checked属性即为选中的意思,无需true或flase,但在vue中处理了这个误解人的属性,v-bind:checked=“布尔值” ,只有布尔值为true时才有checked属性。

表单数据双向绑定

表单标签的数据绑定需要使用v-model指令来操作,因为表单数据是和用户交互的数据。

  v-model指令绑定的数据是双向绑定的。

  数据←→视图(相互影响)

  表单标签如:文本、多行文本、复选框、单选按钮、选择列表等等。

  示例:

    <!-- 注意 : 非表单元素不可以使用 v-model 指令进行双向绑定 -->
<!-- 错误用法:<h1 v-model="message"></h1> --> <!-- 表单元素 text 和 textarea 的双向绑定用法 -->
<input type="text" v-model="message">
<textarea cols="30" rows="10" v-model="message"></textarea> <!-- checkbox 的双向数据绑定的正确用法 -->
<input type="checkbox" v-model="seen"> <!-- 注意:checkbox 不能使用属性绑定的用法控制选中状态,如下错误用法示例 -->
<input type="checkbox" :checked="seen">
<!--
这样相当于给checkbox加上 checked 属性,而作为 html 元素的 checkbox
加了checked属性,无论是 true 还是 false 都是选中状态的。
-->

事件处理

  1. vue中定义事件处理函数
  2. DOM中绑定事件处理函数

    ■  完整写法:v-on:事件名称=”事件处理函数”

     ■ 简写方式: @事件名称=”事件处理函数”

  <div id="app">
<input type="text" v-model="number"><br/> <!-- vue中事件绑定需要用v-on:指令-->
<!-- 完整写法 -->
<button v-on:click="handleClick">事件绑定完整写法:点击number++</button><br/> <!-- 因为事件处理用的比较多,所以vue提供了@事件名称="处理函数"的简写方式 -->
<button @click="handleClick">事件绑定简写方式:点击number++</button>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el : '#app' ,
data : {
number : 1
},
methods : { // 事件处理函数定义在methods中,注意:methods中定义的方法名称不能和data中的数据名称相同
handleClick : function () {
console.log(this.number++);
}
}
});
</script>

效果:

  

vue安装介绍参考: 三种方式安装(vue-cli)

vue学习之路 - 2.基本操作(上)的更多相关文章

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

    vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...

  2. vue学习之路 - 3.基本操作(中)

    基本操作(中) 本章节主要介绍:vue的条件渲染.列表渲染,计算属性和侦听器 条件渲染和列表渲染 条件渲染主要使用到了 v-if 指令,列表渲染主要使用了 v-for 指令. 下面介绍 v-if .  ...

  3. Vue学习之路之登录注册实例代码

    Vue学习之路之登录注册实例代码:https://www.jb51.net/article/118003.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wa ...

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

    这里说声抱歉,周末因为有其他事,没有更新博客,那么我们今天继续上周5的说. 老规矩,先回顾一下上一次的重点: 1.利用V-if和v-else来提到show()和hide(),同时要记住,v-else一 ...

  5. Vue学习之路第一篇(学习准备)

    1.开发工具的选择 这个和个人的开发习惯有关,并不做强求,厉害的话用记事本也可以.但是我还是建议用人气比较高的编辑工具,毕竟功能比较全面,开发起来效率比较高. 我之前写前端一直用的是sublimete ...

  6. 后端开发者的Vue学习之路(三)

    目录 上节内容回顾 组件 什么是组件 组件注册 全局注册组件 局部注册组件 使用细节 组件注册的命名规范: 组件中只有一个根元素 组件也是一个实例 组件在某些元素中渲染出错 组件间的数据传递 父子组件 ...

  7. 后端开发者的Vue学习之路(一)

    目录 前言: iview组件库示例 element组件库示例 Vue的介绍 兼容性: 学习Vue需要的前置知识: MVVM模型 补充: 安装/导入 导入Vue 安装 两种方式的区别: HelloWor ...

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

    昨天我们大致了解了有关Vue的基础知识和语法:今天我们继续在大V这条路上前进. 首先,我们回忆一下昨天提到的相关知识点: 1.了解Vue的核心理念------"数据驱动视图" 2. ...

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

    我们还是先回顾一下上一次的重点: 1.事件绑定,我们可以对分别用方法和js表达式对事件进行处理 2.当方法名带括号的时候,在方法中一定要传参:而不带括号的时候,vm会自动配置默认event 3.各类事 ...

随机推荐

  1. 自动检测GD库支持的图像类型

    以下代码通过自动检测GD库支持的图像类型 来写出移直性更好的PHP代码 <?php if(function_exists("imagegif")){ header(" ...

  2. PHPExcel探索之旅---阶段一

    类似于Java,php也有操作Excel的方法,其中需要下载PHPExcel插件,将其中的Classes文件夹改名为PHPExcel并提取到根文件夹外面,将两个文件夹一起放在所需项目中 使用PHPEx ...

  3. 从HTML form submit 到 django response是怎么完成的

    HTML form 里的数据是怎么被包成http request 的?如何在浏览器里查看到这些数据? 浏览器做的html数据解析 form里的数据变成name=value对在POST Body中 re ...

  4. (转)深入浅出linux系统umask值及其对应的文件权限讲解

    浅出linux系统umask值及其对应的文件权限讲解 原文:http://blog.51cto.com/oldboy/1060032 缘起:1.此文的撰写特别为感谢51cto的博客工作人员和领导,老男 ...

  5. Hibernate的事务管理

    Hibernate的事务管理 事务(Transaction)是工作中的基本逻辑单位,可以用于确保数据库能够被正确修改,避免数据只修改了一部分而导致数据不完整,或者在修改时受到用户干扰.作为一名软件设计 ...

  6. 引用 Session详解 作者:郎云鹏

    本文转载自leeldy<Session详解 作者:郎云鹏>   引用 leeldy 的 Session详解 作者:郎云鹏 目录: 一.术语session 二.HTTP协议与状态保持 三.理 ...

  7. DockerSwarm 微服务部署

    一.简介 之前<服务Docker化>中,使用 docker-compose.yml 来一次配置启动多个容器,在 Swarm 集群中也可以使用 compose 文件 (docker-comp ...

  8. hibernate课程 初探单表映射1-6 hibernate项目建立以及导入jar包

    hibernate 项目建立 1 new ==>java project hibernate 导入jar包 1 windows==>prerence==>java ==>bui ...

  9. win10+asp+access 父路径开启无效

    如题: 在win10环境下,布署asp+access,发现在用到"../website/"时就出错,提示不能使用父路径 可是我在IIS 的asp中明明打开了父路径的 如下 但是偏偏 ...

  10. Struts2笔记3--OGNL

    一.OGNL入门 1.简介     OGNL的全称是对象图导航语言(Object-Graph Navigation Language),它是一种功能强大的开源表达式语言,使用这种表达式语言,可以通过某 ...