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. ecplise中设置字体大小和背景

    1 将ecplise中的代码背景设置为豆沙色 2 设置ecplise中的字体大小

  2. Windows创建Sciter的第一个程序.HelloWorld

    介绍什么的就免了.直接进入正题 平台: Windows 10 IDE : Visual studio 2017 首先从官网下载最新的SDK,https://sciter.com/download/ 创 ...

  3. mysql5.5.25 中文问题 my.ini没有及配置问题 修改默认编码方式

    1.当你向mysql输入中文后,用select查询结果中文变成了问号,那你就往下看. 2.打开cmd,进入mysql,输入show variables like"%char%";可 ...

  4. PC能替代服务器吗？

    PC能替代服务器吗?全方位解析二者区别_华为服务器_服务器x86服务器-中关村在线http://server.zol.com.cn/536/5366835_all.html

  5. 一个切换内外网IP地址的批处理BAT

    做了一个切换内外网的小脚本.没想到这个老的没剩几颗牙的DOS竟然功能如此强大.盛名之下名副其实啊!不亏是想当年叱咤风云的操作系统啊! 脚本内容1.建立两个TXT文件,分别按行存储内外网的IP,MASK ...

  6. Oracle中计算两个日期时间的差

    --方法1 select floor((sysdate - to_date('2006-09-01 08:00:00', 'yyyy-mm-dd hh24:mi:ss'))) as sDays fro ...

  7. 2186 Popular Cows

    Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 41771   Accepted: 16955 De ...

  8. java8-lambda常用语法示例

    常用语法示例: public static void main(String[] args) { List<OrderInfo> orderInfoList = Lists.newArra ...

  9. oracle 数据库备份expdp、impdp

    跳转查看:https://blog.csdn.net/qq_26230421/article/details/79382013 或 https://www.cnblogs.com/promise-x/ ...

  10. Flask 上下文管理

    为什么用threading.local? 我们都知道线程是由进程创建出来的,CPU实际执行的也是线程,那么线程其实是没有自己独有的内存空间的,所有的线程共享进程的资源和空间,共享就会有冲突,对于多线程 ...