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. bit、byte、与字符

    bit bit是计算机中最小的传输单元 是计算机晶体管的一种状态(通电与断电).就是0与1,真与假. 示例: 2bit : 10; 4bit : 1111; 8bit : 1111 1111; byt ...

  2. 对弈的C++学习笔记

    2018-07-11上传   一:从C到C++ 1.C++新类型 bool 判断真假 占用一个字节      if(条件) 真1或者假 0     bool 类型的取值 true false      ...

  3. JAVA面向对象之继承

    继承: 子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法 class 子类 extends 父类 { } 继承的特性: 子类拥有父类非private的属性,方法. 子类可以拥有自己 ...

  4. git pull提交代码遇到的问题

    git pull 提示如下错误 解决方法: git pull 后面加上分支具体地址  比如:git pull origin daily/1.0.0 同样git push origin daily/1. ...

  5. console.log()中的%d,%s等代表的输出类型

    在console.log()或console.debug()中输出时会有%d,%s等符号. %s for a String value 字符类型 %d or %i for a Integer valu ...

  6. CG-ctf WP

    week one 1 /x00 提示:有多种解法,你能找到几种 源码: writer up: 题目直接给出了源码,get 到一个 nctf 这个变量,int ereg(string pattern, ...

  7. mbstowcs 和ifstream 前为何要setlocale

    最近看公司的一些代码,发现一些地方调用了std::locale::global(locale("")); (c++) 和 setlocale(LC_ALL, "" ...

  8. Java ee Turorial Hello1 Hello1.java解析

    package javaeetutorial.hello1; import javax.enterprise.context.RequestScoped;import javax.inject.Nam ...

  9. 第四次Scrum编码冲刺

    第四次Scrum编码冲刺!!!! 一.总体任务: 本次冲刺是完成对图书馆管理系统的最后三个功能的实现------管理员对用户授权.用户注销和用户查询 二.个人任务及完成情况:    本人本次的任务是实 ...

  10. 第一次玩博客，今天被安利了一个很方便JDBC的基于Spring框架的一个叫SimpleInsert的类，现在就来简单介绍一下

    首先先对这段代码的简单介绍,我之前在需要操作JDBC的时候总是会因为经常要重新写SQL语句感到很麻烦.所以就能拿则拿不能拿的就简单地封装了一下. 首先是Insert.Spring框架的JDBC包里面的 ...