废话不多说,直接上干货
vue的核心:修改数据(model),html节点就会自动更新
(1)绑定数据:
var vm; var count=1; $(function () { vm=new Vue({ el: '#demo', data: { message: 'Hello World!', number: 2, ok:true, name:'whuang' } }); vm.$watch('data', function (newVal, oldVal) { console.log('$watch'); }) });
html代码:
<div id="demo"> {{ message }}<br> {{ number + 1 }}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }}<br> {{ name | uppercase }} <hr> <input type="button" class="{{ ok ? 'cls1' : 'cls2' }}" value="更新数据" onclick="updateData2()" > </div>
(2)动态更新数据
var updateData2= function () { vm.$data.message="更新后的数据"+(count++); vm.$data.ok=false; };
如何获取vue的data?
注意:data前面要加$
(3)vue表达式
{{ number + 1 }}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }}<br> {{ name | uppercase }}
动态修改样式:
<input type="button" class="{{ ok ? 'cls1' : 'cls2' }}" value="更新数据" onclick="updateData2()" >
在js方法中修改ok的值即可
(4)vue计算属性
var vm = new Vue({ el: '#example', data: { a: 1 }, computed: { // 一个计算属性的 getter b: function () { // `this` 指向 vm 实例 return this.a + 1 }, upper: function () { return "<span style='color:red' >school</span>".toUpperCase(); }, haha: function () { return 'iloveyou'.split(''); } } })
html代码:
<div id="example"> a={{ a }}, b={{ b }}<br> {{{ upper }}}<br> {{ haha }}<br> </div>
(5)监听数据的变化
执行结果:
new:更新后的数据1;old:Hello World!
(6)如何获取vue的节点和数据
节点:vm.$el
数据:vm.$data
(7)
相关推荐
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用,它提供了全局范围的 Vue 构造函数和一些全局...
内容:vue.js、vue.min.js、vue.common.js、vue.common.dev.js、vue.common.prod.js、vue.esm.browser.js、vue.esm.browser.min.js、vue.runtime.js、vue.runtime.min.js、vue.runtime.esm.js、vue.runtime.common....
vue.js和vue.min.js
vue.min.js&vue.min.js&vue.common.js&vue.esm.js&vue.runtime.js等 真实资源共计14个js
整个文件就是官网:https://cn.vuejs.org/v2/guide/#Vue-js-是什么 入门介绍,虽然官网介绍的步骤着实详尽,但作为萌新入门还是有一些坑, 特将自己爬坑的代码贡献出来。希望对大家能有帮助。
Explore Vue.js to take advantage of the capabilities of modern browsers and devices using the fastest-growing framework for building dynamic JavaScript applications. You will work with the power of ...
Vue.js前端开发-快速入门与专业应用 Vue.js前端开发-快速入门与专业应用 Vue.js前端开发-快速入门与专业应用 Vue.js前端开发-快速入门与专业应用 Vue.js前端开发-快速入门与专业应用
目前社区有很多 Vue.js 的源码解析文章,但是质量层次不齐,不够系统和全面,这本电子书的目标 是全方位细致深度解析 Vue.js 的实现原理,让同学们可以彻底掌握 Vue.js。 为了把 Vue.js 的源码讲明白,课程设计成...
《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲.docx《Vue.js前端框架技术与实战》教学大纲与实训大纲....
vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js vue.min.js ...
<script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"> src里面的内容根据自己的下载的Vue.js的文件位置决定的,我这里只是拿我自己做的举个例子。这个地方的vue.js是因为我下载了两次这个版本...
vue.js入门教程
学完本系列课程后,学员将会达到学习目标:只要具有JavaScript基础的学员都能灵活运用Vue.js技术设计前端程序。 实践阶段由浅入深分为四个案例:动态评分、图片轮播、OLTP管理界面、聊天室。聊天室程序则体现了Vue...
vue.min.js官方2.6.14版本
vue.js入门到精通视频,感兴趣的可以看看,入门到精通只是上手视频
Vue.js 技术揭秘
vue.js和vue.min.js和node.js的安装配置包(详细安装说明请见我的另一个博文node.js和vue.js安装配置)
基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue...
vue实战开发.快速上手.好不容易找到电子版.非PDF版