1.1 创建第一个Vue实例

官方网站：https://cn.vuejs.org

学习 --> 安装

刚开始学习Vue，使用最简单的安装方式，直接用<script>引入

我们下载开发版本的Vue.js

创建一个index.html， 引入Vue.js

使用Vue.js创建一个实例

<!DOCTYPE html>
　　<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>Vue入门</title>
　　　　<script src="./vue.js"></script>
　　</head>
　　<body>
　　　　<div id="app">{{msg}}</div>
　　　　<script>
　　　　　　new Vue({
　　　　　　　　el: "#app",  //挂载点
　　　　　　　　data: {
　　　　　　　　　　msg: "hello world"
　　　　　　　　}
　　　　　　})
　　　　</script>
　　</body>

</html>

1.2 Vue实例中的数据，事件和方法

v-text指令

<div v-text="number"></div>

v-html指令

<div v-html="number"></div>

绑定事件

<div id="app">

    <div v-on:click="clickFn">{{content}}</div>

</div>
<script>
　　new Vue({
　　　　el: "#app",
　　　　data: {
　　　　　　content: "hello"
　　　　},
　　　　methods: {
　　　　　　clickFn: function () {
　　　　　　　　//改变数据
　　　　　　　　//当数据发生变化的时候，Vue会自动帮你去更新页面
　　　　　　　　//不需要直接去操作DOM
　　　　　　　　this.content = "world"
　　　　　　}
　　　　}
　　})
</script>

v-on:click 可以简写成 @click

<div @click="clickFn">{{content}}</div>

现在的编程，不是面向DOM去编程了，而是面向数据去编程了。

当数据发生改变，页面就会自动发生变化了。

想让页面的数据发生变化，并不需要直接的去操作DOM，通过this.xxx="xxx"，去改变实例中的数据就行了。

Vue实例会监听到你数据的改变，自动的帮你对模板进行更新，页面就会自动跟着变化了。

1.3 Vue中的属性绑定和双向数据绑定

我们希望属性title的值可以改变

<div id="app">
　　<div v-bind:title="title">hello world</div>
</div>
<script>
　　new Vue({
　　　　el: "#app",
　　　　data: {
　　　　　　title: "this is title"
　　　　}
　　})
</script>

v-bind:title 的意思是，我当前title这个属性，和Vue实例中的title这个数据项进行绑定。

那么经过这样写之后，v-bind:title = "title"， 双引号中的title就不再是字符串了，而是表达式了， 双引号中的title是一个变量。

v-bind: 可以缩写成 :

<div :title="title">hello world</div>

v-bind:title  和 :title 意思是一样的。

双向数据绑定

什么是单向绑定？

答：数据决定页面的显示，但是页面无法决定你数据里面的内容。

使用v-model指令，来进行双向数据绑定，可以在页面中改变数据。

<div id="app">
　　<input v-model="content" />
　　<div>{{content}}</div>
</div>
<script>
　　new Vue({
　　　　el: "#app",
　　　　data: {
　　　　　　title: "this is title",
　　　　　　content: "this is content"
　　　　}
　　})
</script>

1.4 Vue中的计算属性和侦听器

Vue2.5基础的更多相关文章

  1. vue2.0基础知识，及webpack中vue的使用

    ## 基础指令 ## [v-cloak]{         Display:none;     }     <p v-cloak>xx{{msg}}xx</p> //解决闪烁问 ...

  2. Vue2.0 基础入门

    前言:" 今生遇汝,何其幸哉:于我蒙昧之时遇到你,于我大雾初透之时爱上你,于我大智初醒之时沉沦你. " 官网: 介绍 - Vue.js (vuejs.org) 指令与修饰符 创建实 ...

  3. 【vue2.x基础】用npm起一个完整的项目

    1. 安装vue npm install vue -g 2.  安装vue-cli脚手架 npm install vue-cli -g 3. 安装webpack npm install webpack ...

  4. Vue2.0表单校验组件vee-validate的使用

    vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 n ...

  5. Vue2自定义插件的写法-Vue.use()

    最近在用vue2完善一个项目,顺便温习下vue2的基础知识点! 有些知识点恰好没用到时间一长就会淡忘,这样对自己是一种损失. 定义一个对象 对象里可以有任何内容 但install的函数是必不可少的,因 ...

  6. vee-validate使用教程

    vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 n ...

  7. VUE验证器哪家强？ VeeValidate absolutely!

    VUE验证器哪家强? VeeValidate absolutely! vee-validate表单验证用法 github地址:https://github.com/baianat/vee-valida ...

  8. vue3项目后台管理系统模板

    Vue3.0 发布第一个版本至今有一段时间了,到现在一直在更新优化,在性能方面,对比 Vue2.x ,性能的提升比较明显,打包后体积更小 来看下 Vue3.x 新增了哪些功能和特性. Performa ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础：JS面向对象&字面量& this字

    缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...

随机推荐

  1. 【SoftwareTesting】Lab 1

    1.  安装junit, hamcrest 和 eclemma 分别下载  hamcrest-core-1.3.jar和junit-4.12.jar这两个jar包,并加入到新建的项目中 具体步骤为:右 ...

  2. 常用的字符串函数-S

    header('content-type:text/html;charset=utf-f'); /* $var=addslashes($_GET['username']);//转义表单提交内容中的引号 ...

  3. java跨域

    在我们开发当中  经常会碰见跨域问题 今天我来说下 我在工作撞见的跨域: 一.首先我们要了解跨域存在的原因 1.浏览器限制 2.跨域(域名,端口不一样都是跨域) 3.XHR(XMLHttpReques ...

  4. jsp视频如何播放

    网站开发小白们对如何插入视频有较大的困扰,一段时间不知道从何下手,想在数据库里面直接导入,但没能成功,后又尝试直接在myeclipse里面直接放入视频. 对于不同的播放器,视频的格式也有要求,建议使用 ...

  5. 2018-CVTE中央研究院-自然语言处理算法工程师-电话初面问题

    楼主NLP初学者一名,有幸参加2018年CVTE中央研究院自然语言处理电话面试,问题总结如下: 1.详细的介绍自己的学术论文(感觉他们非常重视这块),会问你网络的具体构造,注意力机制如何计算以及为何你 ...

  6. 使用RevoUninstaller Pro卸载

    使用RevoUninstaller Pro卸载opera浏览器,操作过的注册表 HKEY_CURRENT_USER\SOFTWARE\CLASSES\Local Settings\Mircrosoft ...

  7. 数据库between and

    在此记录一下,between相当于大于等于,and相当于小于,举个例子:select * from A where modefytime between '31-3月 -16' and '1-4月 - ...

  8. Java中next（）和nextLine（）的区别

    首先,next()一定要读取到有效字符后才可以结束输入,对输入有效字符之前遇到的空格键.Tab键或Enter键等结束符,next()方法会自动将其去掉,只有在输入有效字符之后,next()方法才将其后 ...

  9. 201771010141 周强 面向对象程序设计（Java）第12周作业

    实验十二  图形程序设计 实验时间 2018-11-14 1.实验目的与要求 (1) 掌握Java GUI中框架创建及属性设置中常用类的API: (2) 掌握Java GUI中2D图形绘制常用类的AP ...

  10. Ubuntu16.04下ZeroC ICE的安装与使用示例（Qt C++ 和 Java）

    项目需求:在Ubuntu16.04系统下安装并使用ICEgrid 3.7进行c++和Java Springboot开发环境的通信,下面逐一介绍各个步骤的详解: 一:Ice Lib的安装 参考官网地址: ...