(3)打鸡儿教你Vue.js
2023-09-11 14:16:52 时间
vue.js是一套构建用户界面的渐进式框架
vue关注视图层,采用自底向上增量开发的设计
<div id="app">
<p>{{ message }}</p>
</div>
vue.js安装
下载 vue.min.js 并用
npm install vue
cd my-project
npm install
npm run dev
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
$ cd my-project
$ cnpm install
$ cnpm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
目录结构:
build 项目构建(webpack)相关代码
config 配置目录
node_modules npm 加载的项目依赖模块
static 静态资源目录
test 初始测试目录
package.json 项目配置文件
通过实例化Vue实现:
var vm = new Vue({
// 选项
})
{{ }} 用于输出对象属性和函数返回值
var vm = new Vue({
el: '#vue_det',
data: data
})
document.write(vm.$data === data) // true
document.write("<br>")
document.write(vm.$el === document.getElementById('vue_det')) // true
请点赞!因为你的鼓励是我写作的最大动力!
吹逼交流群:711613774
相关文章
- JS框架_(Qrcode.js)将你的内容转换成二维码格式
- JS框架_(JQuery.js)上传进度条
- baguetteBox.js响应式画廊插件(纯JS)
- vue ui 使用图形化界面
- vue表单校验必填项
- [Vue @Component] Control Template Contents with Vue's Render Function
- vue.js开发SPA常见问题及解决方法
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
- vue.config.js常用配置详解
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue-rx] Watch Vue.js v-models as Observable with $watchAsObservable and RxJS
- 前台项目基础框架之vue前端(vue@3.2.6)
- Vue 记录 TypeError: Cannot read properties of undefined (reading ‘_withTask‘)
- Vue学习之--------路由守卫(2022/9/6)
- vue-route(三)后台管理路由配置
- 101:vue+openlayers 根据Resolution的不同,显示不同的地图 (示例代码)
- 085:vue+openlayers加载gif图片动画 (示例代码)
- Vue:第一个vue-cli项目