vue是什么(vue框架)

vue是什么

中文官方网站地址：https://cn.vuejs.org/英文官方网站地址：https://vuejs.org/
文档使用情况
Vue定义
用于用户构建用户界面的渐进式JavaScript框架。
了解Vue基础知识
要使Vue工作，必须创建一个Vue实例并传入一个配置对象；
根容器中的代码仍然符合html规范，但它混合了一些特殊的Vue语法；
根容器中的代码称为[Vuetemplate]
容器与实例一一对应
在实际开发中只有一个Vue实例，它将与组件一起使用
｛｛xxx｝｝插值中的xxx可以自动读取数据中的所有属性；
一旦数据中的数据发生变化，模板中使用数据的位置也将自动更新（数据劫持）
注意区分：js表达式和js代码（语句）
（1）表达式：表达式将产生一个值，该值可以放置在需要值的任何位置；a+b演示（1）x==y？’a’：’b’
（2）Js代码（语句）if（）｛｝for（）｛｝
<!–容器–>
<divid=“root”>
<!–插值语法–>
<h1>你好，｛｛name｝｝</h1>
</div>
<脚本>
Vue.config.productionTip=false
//创建Vue案例
新Vue({
El:’#root’，//El用于指定当前Vue实例服务的容器。值通常是css选择器字符串
//el:document.getElementById（’root’），
Data:{//Data用户存储数据，该数据由el指定的容器使用，值被临时写入对象
姓名：“张三”
}
})
</script>
Vue模板语法有两类：
（1）插值语法：函数：用于解析标签正文内容。编写方法：｛｛xxxx｝｝，xxx是一个表达式，可以直接读取数据中的所有属性。
（2）指令语法：函数：用于解析标签（包括标签属性、标签内容、绑定事件等）
例如：v-bind:href=’xxxx’
或缩写为：href=’xxxx’。xxxx需要编写js表达式，可以直接读取数据中的所有属性。
Html<av-bind=“url”：x=“hello”>这是一个超链接</a>
举个例子：
（1）V-on:click=’xxxx’或缩写为@click=’xxxx’，其中xxx是事件名称
（2）事件的回调需要在methods对象中配置，并且最终将在vm上；
（3）方法中配置的函数都由Vue管理，这指向vm或组件case对象；
（4）@click=“demo”和@click=“demo（$event）”具有相同的效果，但后者可以传递参数
<divid=“root”>
<buttonv-on:click=“showInfo1”>单击我的提示信息</button>
<!–$事件是关键字–>
<buttonv-on:click=“showInfo2（$event，66）”>单击我的提示信息</button>
</div>
<脚本>
constvm=新Vue({
el:“#根”，
数据（）{
返回{
姓名：“哈哈”
}
},
方法：{
/*方法不执行数据代理*/
showInfo1（事件）{
console.log（event.target.innerHTML）；
},
showInfo2（事件，参数）{
console.log（参数，事件）；
}
},
})
</script>
Vue数据绑定有两种类型：
（1）单向绑定（v-bind）：数据只能从数据流到页面。
（2）双向绑定（v-model）：数据不仅可以从数据流到页面，也可以从页面流到数据。评论：
1.双向绑定一般用于形成类元素（如input、select等）
2.v-model：值可以缩写为v-model，因为v-model默认收集值
xml＜inputv-model=“name”＞
有两种方法可以写入数据和el：
写el有两种方法
（1）新建Vue时配置el属性
（2）首先创建Vue实例，然后使用vm$Mount（“#root”）指定el的值
有两种写入数据的方法
（1）基于对象
（2）函数式
一个重要的原则
对于Vue管理的函数，不要编写箭头函数。一旦编写了箭头函数，这将不再是Vue实例
Vue功能
采用组件化模式，提高代码重用率，使代码更易于维护。
声明性编码允许程序员在不直接操作DOM的情况下提高开发效率。
使用虚拟DOM+优秀的Diff算法尽可能重用DOM节点
构建开发环境
直接导入CDN路径或下载到本地资源进行导入（本地资源参考下载中的内容）
A.当引入开发版本时，控制台提示解决方案：
1.安装开发和调试工具，资源正在下载中
2.Vue。配置。productionTip=false（防止vue在启动时生成生产提示）
B.导入生产版本：
NPM参考，带命令行工具
了解MVVM模型
M：型号：数据i

vue框架

Vue是一个用于构建用户界面的渐进式框架。Vue采用自底向上增量开发的设计，提供MVVM数据绑定和可组合组件系统，并具有简单灵活的API，通过API可以实现响应式数据绑定和组合视图组件。
主要特点：
1）轻量级
Vue可以自动跟踪依赖模板表达式和计算属性，并具有灵活的API，这使开发人员易于理解并更快地开始。
2）双向数据绑定
Vue将数据劫持与发布者-订阅者模式相结合，通过Object劫持各种属性的setter和getter。defineProperty（）。当数据发生变化时，Vue会向订阅者发布消息，并触发相应的监控回调以呈现视图。
3）说明
Vue通过内置指令与页面交互。该指令的功能是在表达式的值更改时将交互行为应用于DOM。
4）组件化
组件可以扩展HTML元素并封装可重用代码；父组件和子组件之间的通信可以通过props以一种方式从父组件传递到子组件。子组件和父组件通过触发事件$exit通知父组件更改数据。兄弟组件通信包括总线和Vuex；跨级别组件通信包括Bus、Vuex、provide/object、$attrs/$listers
5）路由
Vuerouter是Vue的一个路由插件，用于构建单页应用程序。路由用于设置访问路径和映射路径和组件，而传统的方法是通过超链接切换和跳转页面。
6）状态管理
Vuex是专门为Vue应用程序开发的状态管理模式。事实上，它是一个单向数据流。状态驱动视图的渲染，用户对视图的操作会生成一个操作，该操作会更改状态，从而可以重新渲染视图并形成一个单独的组件。
优势：
Vue组件化开发减少了代码量，易于理解；
Vue不使用路由
将刷新
页面，部分刷新；
MVVM开发模式，双向数据绑定；
虚拟DOM用于服务器端渲染