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.0基础知识,及webpack中vue的使用
## 基础指令 ## [v-cloak]{ Display:none; } <p v-cloak>xx{{msg}}xx</p> //解决闪烁问 ...
- Vue2.0 基础入门
前言:" 今生遇汝,何其幸哉:于我蒙昧之时遇到你,于我大雾初透之时爱上你,于我大智初醒之时沉沦你. " 官网: 介绍 - Vue.js (vuejs.org) 指令与修饰符 创建实 ...
- 【vue2.x基础】用npm起一个完整的项目
1. 安装vue npm install vue -g 2. 安装vue-cli脚手架 npm install vue-cli -g 3. 安装webpack npm install webpack ...
- Vue2.0表单校验组件vee-validate的使用
vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 n ...
- Vue2自定义插件的写法-Vue.use()
最近在用vue2完善一个项目,顺便温习下vue2的基础知识点! 有些知识点恰好没用到时间一长就会淡忘,这样对自己是一种损失. 定义一个对象 对象里可以有任何内容 但install的函数是必不可少的,因 ...
- vee-validate使用教程
vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 n ...
- VUE验证器哪家强? VeeValidate absolutely!
VUE验证器哪家强? VeeValidate absolutely! vee-validate表单验证用法 github地址:https://github.com/baianat/vee-valida ...
- vue3项目后台管理系统模板
Vue3.0 发布第一个版本至今有一段时间了,到现在一直在更新优化,在性能方面,对比 Vue2.x ,性能的提升比较明显,打包后体积更小 来看下 Vue3.x 新增了哪些功能和特性. Performa ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础:JS面向对象&字面量& this字
缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...
随机推荐
- Python之set方法
class set(object): """ set() -> new empty set object set(iterable) -> new set o ...
- vue created中初始化属性
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作
- linux 搭建SVN服务端
搞了个服务器,然后现在想搞点事情,于是乎整个SVN在上面,算是熟悉下svn的操作过程 以下内容转载自: https://yq.aliyun.com/articles/6693 ------------ ...
- 如何将本地的文件上传到你的github仓库中(首次流程)
1.(先进入项目文件夹,右键项目文件夹,选择git Bash)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add . ...
- 易语言 - 模块 - 子程序 - 纯真IP数据库查询
.版本 .支持库 spec .程序集 程序集1 .子程序 _启动子程序, 整数型, , 请在本子程序中放置易模块初始化代码 _临时子程序 () ' 在初始化代码执行完毕后调用测试代码 返回 () ' ...
- 常用的JSP内置对象(1)
常用的JSP内置对象 request对象主要用于处理客户端请求 request对象的作用是与客户端交互,收集客户端的Form.Cookies.超链接,或者收集服务器端的环境变量. request对象常 ...
- 爬虫基础之urllib库(代码演示)
# 自定义opener from urllib.request import ProxyHandler,build_opener from urllib.error import URLError ...
- es6 this指向
在非箭头函数中,谁调用的函数,this指向就是谁: var obj={ fn:function(){ console.log(this); } } obj.fn();//object 如果this出现 ...
- flume实现kafka到文件测试用例
kafka 到 file at2.sources =st2 at2.channels = ct2 at2.sinks = kt2 # For each one of the sources, the ...
- Codeforces 977D: Divide by three, multiply by two(暴力)
题意 有nnn个无序的数,对这些数进行排列,要求ai=3×ai+1a_i=3\times a_{i+1}ai=3×ai+1或2×ai=ai+12\times a_i=a_{i+1}2×ai=ai ...