Vue2.5基础 - 秒客网

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基础的更多相关文章

vue2&period;0基础知识，及webpack中vue的使用
## 基础指令 ## [v-cloak]{ Display:none; } <p v-cloak>xx{{msg}}xx</p> //解决闪烁问 ...
Vue2&period;0 基础入门
前言:" 今生遇汝,何其幸哉:于我蒙昧之时遇到你,于我大雾初透之时爱上你,于我大智初醒之时沉沦你. " 官网: 介绍 - Vue.js (vuejs.org) 指令与修饰符创建实 ...
【vue2&period;x基础】用npm起一个完整的项目
1. 安装vue npm install vue -g 2. 安装vue-cli脚手架 npm install vue-cli -g 3. 安装webpack npm install webpack ...
Vue2&period;0表单校验组件vee-validate的使用
vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 n ...
vee-validate使用教程
vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 n ...
VUE验证器哪家强？ VeeValidate absolutely&excl;
VUE验证器哪家强? VeeValidate absolutely! vee-validate表单验证用法 github地址:https://github.com/baianat/vee-valida ...
从壹开始前后端分离 [ Vue2&period;0+&period;NET Core2&period;1] 十五 &boxV;Vue基础：JS面向对象&amp&semi;字面量&amp&semi; this字
缘起书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...
从壹开始前后端分离 [ Vue2&period;0+&period;NET Core2&period;1] 十八&boxV;Vue基础&colon; 指令(下)+计算属性+watch
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
vue2&period;0&period;js基础开发使用心得（结合实际项目对数据的增删改查）
1.首先申明,没有使用vue 的组件,以及脚手架等,都是一些基础语法的使用. ------------------------------------------------------------- ...

随机推荐

【C&num;】可空类型(Nullable)
C# 可空类型(Nullable) C# 提供了一个特殊的数据类型,nullable 类型(可空类型),可空类型可以表示其基础值类型正常范围内的值,再加上一个 null 值. 例如,Nullable& ...
IIS性能相关的配置、命令
IIS性能相关的配置.命令应用程序池回收不要使用缺省的“固定时间间隔(分钟)”:1740(即29小时),建议改为0 可以根据实际情况设置特定时间回收,比如凌晨4点最大工作进程数可以根据实际情况 ...
解决ORA-28000&colon; the account is locked
原文地址:http://yanwushu.sinaapp.com/ora-28000-the-account-is-locked/ 在oracle中.连续十次尝试登陆不成功.那么此账户将会被锁定(lo ...
在ERP中定义用户时报错：SqlDateTime 溢出。必须介于 1/1/1753 12&colon;00&colon;00 AM 和 12/31/9999 11&colon;59&colon;59 PM 之间
在ERP中定义用户时. 报错: SqlDateTime 溢出.必须介于 1/1/1753 12:00:00 AM 和 12/31/9999 11:59:59 PM 之间. 原因分析: ①没有正确初 ...
Linux中MySQL配置文件my&period;cnf参数优化
MySQL参数优化这东西不好好研究还是比较难懂的,其实不光是MySQL,大部分程序的参数优化,是很复杂的.MySQL的参数优化也不例外,对于不同的需求,还有硬件的配置,优化不可能又最优选择,只能慢慢的 ...
PCL安装
本文是在Ubuntu16.04下安装PCL. 按照官网的教程,有两种方法可以安装: 1.直接安装预先编译好的二进制库文件 sudo add-apt-repository ppa:v-launchpad ...
VC显示网页验证码、模拟CSDN网页登录
摘要:by:koma 这两天,本来想花点时间研究一下QQ空间.农场外挂,于是抓包分析一了下,只可惜,在QQ网页登录时进行了加密处理,可惜我对网页编程一窍不通.有些朋友曾讲过那些是通过JS代码进行加密, ...
Mockito/PowerMockito Straige Issues
http://blog.csdn.net/xiaoyaoyulinger/article/details/52415494 http://breezylee.iteye.com/blog/208843 ...
4 springboot 集成swagger2
Swagger:实时生成在线接口文档,方便测试和沟通官网地址:https://swagger.io/ 引入依赖 <dependency> <groupId>io.spring ...
H2 Database 支持数据类型
整数(INT) -2147483648 到 2147483647 java.lang.Integer 布尔型(BOOLEAN) TRUE 和 FALSE java.lang.Boolean 微整数(T ...