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. 简述我理解的C#

    第一章:开发入门 一.基础知识    1.计算机语言发展进程:计算机语言大致经过了机器语言.汇编语言.高级语言三个阶段的发展历程. 汇编语言:使用助记符来替代机器指令机器语言这种反人类的设计,阻碍了软 ...

  2. PAT A1103

    PAT A1103 标签(空格分隔): PAT 解题思路: DFS #include <cstdio> #include <vector> using namespace st ...

  3. Linux集群架构（二）

    Linux集群架构(二) 目录 八.LVS DR模式搭建 九.keepalived + LVS 十.扩展 八.LVS DR模式搭建 1.实验环境: 四台机器: client: 10.0.1.50 Di ...

  4. js中获取时间new Date()详细介绍

    var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)m ...

  5. Mac下安装mongdb

    使用 homebrew 安装 MongoDB :brew install mongodb 这时 MongoDB 将被安装在 /usr/local/Cellar/mongodb/4.0.3_1 (我的 ...

  6. Hello1 web

    <?xml version="1.0" encoding="UTF-8"?>     xml版本,指定编码格式 <web-app versio ...

  7. mac安装破解的Navicat

    原文:https://www.jianshu.com/p/f42785e55b6b 原始文档没操作成功,折腾了一下午,后来在如下地址看的简洁版的,突然发现一句重要的话,豁然开朗. 原文链接:https ...

  8. python-2018.03.03

    本周用python实现了 1.通过svn模块检出远程代码到本地(ps:修改了windows svn的一个编码模块的小bug),并通过调用MSbuild 编译.发布并打包发布后的代码 (注:以上需要安装 ...

  9. windows 下安装MySQL 服务无法启动类问题

    解决方案: 1 执行 mysqld.exe -nt remove 2 执行 mysqld --initialize(中间是两个中划线) 3 执行 mysqld.exe -nt install 4 执行 ...

  10. 深入理解java虚拟机《一》

    一.java发展史 1995.5.23 Oak语言改名为java,sun正式发布java 1.0版本 1996.1.23 JDK 1.0发布,java语言第一个正式版本运行环境 主要包括:java虚拟 ...