Vue.js学习笔记(二)
2023-09-27 14:26:02 时间
Vue.js不支持IE8及以下的版本,因为vue使用了IE8无法模拟的ECMAScript5的特性,它支持所有兼容ECMAScript5的浏览器。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Hello World</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 </head> 11 12 <body> 13 <div id="app">{{content}}</div> 14 <script> 15 //原生js实现hello world 16 // var dom = document.getElementById("app"); 17 // dom.innerHTML = 'Hello World!'; 18 // setTimeout(function() { 19 // dom.innerHTML = 'bye world' 20 // }, 2000); 21 22 //vue实现hello world 23 //使用vue之后不需要关注任何dom的操作,只需把精力集中到数据的管理之上, 24 //数据放的是什么,页面展示的就是什么,数据改变了,页面就会跟着改变 25 var app = new Vue({ 26 el: '#app', //限制了一个vue实例处理的DOM范围 27 data: { 28 content: 'Hello World!' //data用于定义一些数据 29 } 30 }); 31 setTimeout(function() { 32 app.$data.content = 'bye world' //两秒之后content内容变成bye world 33 }, 2000) 34 </script> 35 </body> 36 37 </html>
相关文章
- vue 学习资源链接,总结
- Why not always use the index as the key in a vue.js for loop?
- vue - check-versions.js for shell
- Blazor和Vue对比学习:祖孙传值,联级和注入
- Vue.js 使用cordova camera插件调取相机
- Vue - 列表分页懒加载 / 点击 “加载更多“ 按钮请求接口数据(如何实现类似用户手动点击 “查看更多“ ,然后请求分页懒加载数据填充)可适用于 Nuxt.js 、uni-app 等 Vue.js
- Vue项目--尚品汇(静态主页及其组件的拆分)
- 【前端】Vue.js uniapp 相关教程
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- (30)打鸡儿教你Vue.js
- jenkins部署前端vue、react
- vue打包后文件自定定义命名规则
- vue.js相关UI组件收集
- vue.js 嵌套循环渲染
- vue-cli配置移动端自适应flexible.js
- vue工程化之公有CSS、JS文件
- 【Vue】Vue2做项目时遇到的小bug,简单总结一下~
- Vue报错笔记(1)vue.esm.js?efeb:628 [Vue warn]: Property or method “handleClick“ is not defined on the...
- vue.js 获取标签属性值
- vue-cli3的vue.config.js文件配置,生成dist文件
- npm安装vue-cli报错internal/modules/cjs/loader.js(Error: Cannot find module 'D:Programnodejsnode_globalnode_modulesvue-clibinvue')
- Vue.js中过滤器(filter)的使用
- vue项目兼容IE浏览器
- VUE&Element,能够进行简单的 Element 页面修改, 能够完成查询所有功能, 能够完成添加功能
- Vue路由和路由器简介