您现在的位置是：主页 > news > 阿里云做网站视频无法播放/全国疫情最新

阿里云做网站视频无法播放/全国疫情最新

admin2025/6/6 7:25:23【news】

简介阿里云做网站视频无法播放,全国疫情最新,国外销售网站怎样建设,四川省建设网招标公告1.Vue是什么？ Vue是一套用于构建用户界面的渐进式JavaScript框架 与传统JS和JQuery框架不同，Vue的渐进式框架表示开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。 形成Vue渐进式框架的核心概念为：组件化，MVV…

阿里云做网站视频无法播放,全国疫情最新,国外销售网站怎样建设,四川省建设网招标公告1.Vue是什么？ Vue是一套用于构建用户界面的渐进式JavaScript框架 与传统JS和JQuery框架不同，Vue的渐进式框架表示开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。 形成Vue渐进式框架的核心概念为：组件化，MVV…

1.Vue是什么？

Vue是一套用于构建用户界面的渐进式JavaScript框架

与传统JS和JQuery框架不同，Vue的渐进式框架表示开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。
形成Vue渐进式框架的核心概念为：组件化，MVVM，响应式，和生命周期，下面会一个个详细介绍。

2.库和框架的区别？

库：本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把 控制权交给使用者

  • 代表：jQuery
  • jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

  • 框架规定了自己的编程方式，是一套完整的解决方案
  • 使用框架的时候，由框架控制一切，我们只需要按照规则写代码

区别

  • 核心点：谁起到主导作用（控制反转）

    • 框架中控制整个流程的是框架
    • 使用库，由开发人员决定如何调用库中提供的方法（辅助）

3.理解MVVM？

  • MVVM ===> M / V / VM
  • M：model数据模型
  • V：view视图
  • VM：ViewModel 视图模型

 

MVVM模式（全称为Model-View-ViewModel）为Vue实现数据双向绑定。在MVVM中，View为视图层，ViewModel为业务逻辑层，Model为数据层。

什么是数据双向绑定呢？当用户使View变化时（如填写表单），变化会自动同步到ViewModel处理相应逻辑，并将变化更新到Model数据库。反之，若服务端数据变化（如股价波动），变化会自动同步到ViewModel处理相应逻辑，并将变化同步到View展现给用户。

在用Vue之前，完成HTML和JS之间的交互需要使用大量的DOM操作来实现动态加载。MVVM的数据双向绑定减少了DOM操作，更高效地实现了视图和数据的交互。同时，MVVM使界面、交互和数据层分离，便于设计人员负责设计界面，后端开发人员提供数据接口，而前端开发人员专注于业务交互逻辑的实现。


4.初识Vue？

 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script>
</head><body><!-- 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法3.root容器里的代码被称为【Vue模板】4.Vue实例与容器是一一对应的5.真实开发中只有一个Vue实例，并且会配合着组件一起使用:6.{{xxx}}中的xxx要写js表达式，并且xxx可以自动读取到data中的所有属性7.一旦data中的数据发生改变，那么模板中用到该数据的地方会自动更新注意区分: js表达式 和js代码(语句)1.表达式 :  一个表达式会生成一个值，可以放在任何一个需要值的地方(1): a(2): a+b(3): demo(1)(4): x===y?'a':'b'2.js代码(语句)(1).  if(){}(2).  for(){}--><!-- 容器和Vue实例是一对一关系，一个容器跟一个实例对应 --><!-- 准备好一个容器 --><div id="root"><!-- {{}} 为分隔符 --><h1>Hello,{{name}},{{address}}</h1></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示//创建Vue实例const x = new Vue({el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串data: { //data中用于存储数据，数据供el指定的容器使用，值我们暂时写成一个对象name: 'Tencent',address: '北京市'}})</script>
</body></html>

5.Vue模板语法

Vue模板语法有两大类:1.插值语法:功能:用于解析标签体内容写法:{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性2.指令语法:功能:用于解析标签（包括标签属性，标签体内容，绑定事件....）举例:v-bind:href="xxx" 或简写为 :href="xxx" xxx同样要写js表达式且可以直接读取到data中的所有属性.备注:Vue中有很多的指令，且形式都是: v-???，磁珠只拿v-bind举个例子

6.数据绑定两种方式

 Vue中有两种绑定的方式:1.单向绑定(v-bind): 数据只能从data流向页面2.双向绑定(v-mode):数据不仅能从data流向页面，还可以从页面流向数据备注:1.双向绑定一般都应用在表单雷元素2.v-model:value可简写为v-model  因为v-model默认手机的就是value值

写法展示:

 <!-- 准备好一个容器 --><div id="root"><!-- 普通写法 --><!-- v-bind单向绑定，v-model双向绑定 --><!-- 单向数据绑定:<input type="text" v-bind:value="name"><br> 双向数据绑定:<input type="text" v-model:value="name"> --><!-- 简单写法 -->单向数据绑定:<input type="text" :value="name"><br> 双向数据绑定:<input type="text" v-model="name"><!-- 如下代码是错误的，因为v-model只能应用在表单雷元素(输入类元素) --><!-- <h2 v-model:x="name">你好啊</h2> --></div>
</body>
<script type="text/javascript">Vue.config.productionTip = false //阻止vue在启动时生成生产提示。new Vue({el: '#root',data: {name: '尚硅谷'}})
</script>

7.el与data的两种写法

el两种1.new Vue 配置el属性2.先创建Vue实例，随后再通过实例vm.$mount('#root')指定el的值data两种1.对象式2.函数式如何选择 以后学习到组件时，data必须使用函数式，否则会报错重要原则由Vue管理的函数 一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，指向全局了

8.回顾Object.defineproperty方法   作用:给一个对象添加属性

<!-- 准备一个容器 --><div id="root"></div><script type="text/javascript">let number = 18let person = {name: '张三',sex: '男'}Object.defineProperty(person, 'age', {// value: 18,// enumerable: true, //控制属性是否可以枚举，默认是false// writable: true, //控制属性是否被修改，默认false// configurable: true //控制属性是否被删除，默认是false// 有人读取person的age属性时，get函数就会被调用，且返回时就是ageget: function() {console.log('有人想读age了');return number},//当有人修改person的age属性时，set函数就会被调用，且会受到修改的具体值set(value) {console.log('有人修改了age属性，且值是', value);number = value;}})console.log(person);</script>

相关文章

最新文章