目录
vue.js官网:https://cn.vuejs.org
Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
从官网下载 vue.js 文件
创建一个index.html文件,引入下载好的vue.js文件
下载add-remote-devtools分支上的源码压缩包
下载完成后,解压压缩包源码,使用 npm install 安装依赖,然后使用 npm run build 打包
打包完成之后打开谷歌浏览器,进入谷歌浏览器扩展程序,如下图
浏览器vue插件安装完成
然后打开vue程序页面,F12就可以看到刚安装好的vue插件
<script src="../vue.js"></script>
<body>
<div id="app">{
{ message }}</div> <!-- 容器 -->
<script>
const app = new Vue({ // 创建vue对象实例
el: '#app', // 使用固定的 el 属性指定当前的vue实例为哪个容器使用,值为css选择器字符串
// template: `<h1>{
{message}}</h1>`, // 不使用el的话也可以使用template模板,注意模板中不能同时存在多个根节点
data: { // 使用固定的 data 属性存储数据给 el 指定的容器使用
message: "hello world" // 数据变量,容器中 使用 {
{ }} 语法渲染数据
}
})
</script>
</body>
- 一个vue实例只能对应一个html标签容器
- { {}} 语法可以读取到在data中的所有属性
- data中的数据发生变化,那么在容器用到的数据会自动更新
特点:用在html标签体内
写法:{ { xxx }} // xxx是js表达式,可以拿到data中的所有属性
特点:用在标签解析上(标签属性、标签体内容、绑定事件等),只要用上指令语法那么数据值就可以在data中赋值
写法:v-xxx
// 解析标签属性:v-bind
v-bind:href = 'url' // url是data中的自定义属性
:href='url' // 简写模式
举例(动态渲染a标签的跳转路径):
<script src="../vue.js"></script>
<body>
<div id="app">
<a v-bind:href="url">百度一下</a>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
url: "https://www.baidu.com"
}
})
</script>
</body>
特点:只能从data流向页面
<script src="../vue.js"></script>
<body>
<div id="app">
<!--
1:data数据改变后,html标签中的数据也会改变
2:input中的数据在页面中改变后,data数据不会改变
-->
<input type="text" v-bind:value="name" />
</div>
<script>
const app = new Vue({
el: '#app',
data: {
name: "单向数据绑定"
}
})
</script>
</body>
特点:不仅可以从data流向⻚⾯,也能从⻚⾯表单元素(输⼊元素)流向data
实现:使用 v-model 指令,只能用在能输入的标签上
<input type="text" v-model:value="name" />
<input type="text" v-model="name" /> // 简写
<input type="text" v-model.number="name" /> // 表示只能输入数字类型
举例:
<script src="../vue.js"></script>
<body>
<div id="app">
<!--
1:data数据改变后,html标签中的数据也会改变
2:input中的数据在页面中改变后,data数据也会改变
-->
<input type="text" v-model:value="name" />
</div>
<script>
const app = new Vue({
el: '#app',
data: {
name: "双向数据绑定"
}
})
</script>
</body>
原理:vue的双向数据绑定使用的MVVM模型
- M:Model(模型) 对应data的数据
- V:View(视图) 模板==>页面
- VM:ViewModel(视图模型) Vue实例对象
ViewModel 包含 DOM Listeners 和 Data Bindings。Data Bindings 用于将数据绑定到 View 上显示,DOM Listeners 用于监听操作
MVVM
- 从 Model 到 View 的映射,也就是 Data Bindings 。这样可以大量省略我们手动 update View 的代码和时间
- 从 View 到 Model 的事件监听,也就是 DOM Listeners 。这样我们的 Model 就会随着 View 触发事件而改变
Vue中的MVVM
- data中所有的属性、computed的计算属性、methods中的方法等,最后都出现在了vue实例vm身上
- vue实例vm身上所有的属性 及 Vue原型上所有属性,在Vue模板{ {}}中都可以直接使用
文章浏览阅读5.2k次。Eclipse中项目Src看不到.Java文件需要从Java切换到java EE 工作空间_eclipse导入的项目src下没java
文章浏览阅读677次。转载地址:http://blog.sina.com.cn/s/blog_695e489c01013ldd.html【转】Linux C函数之文件及目录函数(全)(2012-03-30 17:17:37)转载▼标签:杂谈分类: c语言学习chdir, chmod, chown, chroot_c语言 getwd
文章浏览阅读769次。断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法!1:li边距“无故”增加任何事情都是有原因的,li边距也不例外。先描述_style clor #fff
文章浏览阅读9.4k次,点赞6次,收藏39次。HDMI1.4 信号解析说明1、HDMI1.4接口相关引脚说明如下图所示,3组数据差分信号,1组时钟差分信号,I2C,CEC,HOTPLUG,电源和GND; 注:1)HOTPLUG脚在未连接从设备时为低电平,连接后会变成高电平,连接过程中强制给HOTLUG脚发100ms低电平系统会重新进行HDMI连接; 2)HDMI_I2C接口用于主设备和从设备间EDID信息和HDCP认证交互。2、接口中各引脚电平的高值如下表所示:NO. PIN ..._hdmi信号波形
文章浏览阅读9.7k次,点赞4次,收藏28次。栈和队列是两种基本的数据结构,同为容器类型。两者根本的区别在于: stack:后进先出 栈示意图queue:先进先出 队列示意图 注意,stack和queue是没有查询具体某一个位置的元素的操作的。但是他们的排列是按顺序的对于stack我们可以使用python内置的list实现,因为list是属于线性数组,在末尾插入和删除一个元素所使用的时间都是O(1),这非常符合stack的要求。_python stack queue
文章浏览阅读3.1w次,点赞61次,收藏107次。最近博主发现让RecyclerView滑动到某一位置并置顶的博客一大堆,抄的是完全一模一样。此外,虽然这些博客“解决”了这些问题,但这种解决方案过于浅显、粗暴,甚至都违背了开发思想。遂在此纠正这种错误。RecyclerView提供了几种移动的方法scrollToPositionscrollToscrollBysmoothScrollBysmoothScrollToPosit..._groupedrecyclerviewadapter跳到指定item
文章浏览阅读2w次,点赞2次,收藏4次。# coding:utf-8import randomdef createRandomString(len): print ('wet'.center(10,'*')) raw = "" range1 = range(58, 65) # between 0~9 and A~Z range2 = range(91, 97) # between A~Z and a~..._python并发生成唯一数据
文章浏览阅读431次。一、Maven简介项目构建工具(不只是管理jar包),项目设计和编码由程序员来做,它做不了;而编译,运行,测试,打包,部署,jar管理它都能做Apache提供,Java开发的,运行Maven要有基本的java开发工具包Maven仓库:存储jar包本地仓库:当前本地电脑远程仓库:局域网中的服务器中央仓库:远程服务器有远程仓库:本地连接远程,远程仓库中有就下载到本地,没有就去连中央仓库,中央仓库下载到远程,远程再下载到本地,适合团队开发,远程仓库可以连接多个本地仓库,所以很多公_maven 创建javase工程
文章浏览阅读6.3k次,点赞2次,收藏31次。【概要】FPGA配置方式首先介绍下AS、PS、JTAG三种模式的区别。AS模式: 主动串行配置模式。将.pof文件烧写到flash(掉电不丢失)芯片,FPGA器件每次上电时,作为主控制器从配置器件flash(EPCS)主动读取程序文件并存放至FPGA内部的配置存储器(configure RAM),实现逻辑运作,该方法适用于不需要经常升级的场合,一次性读取程序文件;PS..._quartus烧录
文章浏览阅读1.6k次。文章目录GitHub 集成Circle CICI(持续集成) 简单解释CI 工具Circle的使用将GitHub项目授权给 Circle CI书写 config.yml文件测试 Circle CI 配置文件是否生效备注写在最后GitHub 集成Circle CICI(持续集成) 简单解释CI 即 Continuous Integration. 当代码提交上来有变动的时候,在merge之前自动进行一些流程,如:代码风格检查、单元测试是否通过等。当被merge之后,又会自动进行一些流程,如:自动打包、_circleci building status github
文章浏览阅读3.2k次,点赞3次,收藏7次。不废话上图[r,t]=meshgrid(0:0.1:2,0:0.02:2*pi);x=r.*cos(t);y=r.*sin(t);z=x.^2+y.^2;mesh(x,y,z)其实在数学上使用了一个圆的参数方程来实现绘制区域为圆形的效果在这个区域上面是一个碗状图形_meshgrid ,边界是圆
文章浏览阅读763次。Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).定义了一种简洁的,自包含的方法用于通信双方之间以JSON对象的形式安全的传递信息。因为数字签名的存在,这些信息是可信的,JWT 可以使用HMAC算法或者是RSA的公私秘钥对进行签名。JWT 请求流程这里还要注意:光理论是不够的。在此顺便送大家十套20..._springboot jwt 注销登陆