Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue可以使用简单的代码实现一个单页面应用。
基本格式
Vue通过模板语法来声明式的将数据渲染进DOM:
例如：
通过{{ }}即可将数据绑定至message位置
通过以上方法即可成功创建一个Vue实例！
响应式框架
在一个Vue实例中所有数据都是响应式的{{}}中的数据会根据Vue实例中绑定的数据的实时变化发生改变。
Data中Created,methods,watch的区别
在一个Vue实例中，Vue为用户定义了五个函数执行区域，不同的区域在Vue生命周期的不同时间执行，因此可以用于不同情况。
created:在html加载完成之前执行 先执行父组。
件再执行子组件。
mounted:在html加载完成之后执行 先执行子组件再执行父组件。
methods:事件方法执行。
watch:监听一个值的变化，变化后执行。
Vue中提供的特殊属性 包括：v-bind , v-on , v-model。
V-bind指令
v-bind 属性:通过此属性可以绑定元素中属性的值 借此实现属性的动态绑定。
例如：
vue代码：
javascript代码：
以上代码即可实现动态控制
元素显示与隐藏。
V-on指令
v-on属性:通过此属性可以为元素添加一个事件监听器，来提高用户的交互
例如:
vue代码:
javascript代码:
用户点击button按钮是 vue将会调用tijiao()函数。
V-model指令:
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
例如：
vue代码：
javascript代码：
以上代码即可实现用户输入与元素的双向绑定。
V-if指令:
v-if指令的值绑定data中的元素的值true或false 来控制元素的显示或隐藏。
V-for指令:
v-for指令可以实现列表渲染。
例如:
vue代码:
javascript代码:
构建一个组件化单页面应用
vue可以组件树的构建方式来实现一个应用程序。
通过把页面中的一部分分为不同组件实现组件化编程，提高代码的可维护性。
vue框架基本目录结构:
app.vue文件默认结构:
main.js文件默认结构:
通过 Vue-router 技术实现页面的路由。
vue代码
javascript代码
下列代码实现路由 可以理解为html的标签 。页面跳转
将路由结果组件渲染到router-view中。
在vue应用程序中通常通过编写模块组件的方式由浅入深，自底向上的方式来实现一个大规模的应用程序。
下一篇继续了解:
1 . 使用vue创建多页面网站方法。
2 . 通过 Axios 技术发起http请求实现与后端接口的交互。
3 . 了解element-ui 组件便捷成型工具。
4 . vue-router深入理解。
16:08:46
本文章为作者个人总结，如有错误请指正。
Original: https://www.cnblogs.com/coisini-zheng/p/15834346.html
Author: 俭谨
Title: Vue3 框架基础随笔 (一)
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/714395/
转载文章受原作者版权保护。转载请注明原作者出处！