Vue(待续)

概念

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

Vue可以自底向上逐层的应用:

简单应用:只需一个轻量小巧的核心库。

复杂应用:可以引入各式各样的Vue插件。

1.采用组件化模式,提高代码复用率、且让代码更好维护。

2.声明式编码,让编码人员无需直接操作DOM,提高开发效率。

3.使用虚拟DOM+优秀的Diff 算法,尽量复用DOM节点。

数据-》虚拟DOM-》页面真实DOM

官网

Vue.js - 渐进式 JavaScript 框架 | Vue.js

下载安装

安装 --- Vue.js
开发版vue.js,生产板vue.min.js经过了压缩。

使用

vscoder打开空文件夹,创建demo文件夹和js文件夹,将vue.js和vue.min.js放到js文件夹下,demo文件夹写a.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始Vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
</body>
</html>

引入vue后,全局就多了一个Vue的构造函数,需new。

vscoder装号live server后,点vsCoder右下角go live,会把vscoder中所有文件或文件夹作为根资源使用,即端口号后接,如

就是访问http://127.0.0.1:5500/初始Vue/a.html

发现f12后有vue的生产环境不能用开发环境的vue.js的提示,f12控制台敲Vue回车有反应。敲Vue.config回车是vue的全局配置。

加上以下全局配置脚本,关闭刚刚的f12控制台的有vue的生产环境不能用开发环境的vue.js的提示。阻止vue在启动时生成生产提示。

html 复制代码
<body>

<script type="text/javascript">
    Vue.config.productionTip=false
</script>
</body>
</html>

若出现f12后,按住shift+鼠标点击刷新按钮强制刷新后,控制台爆红favicon.ico报404,就是网站页签图标没有加载出来。就可f12跟着接口了。

Vue入门小案例

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始Vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】; -->
    <!-- 准备一个容器叫app -->
<div id="app">  
<h1>hello world {{name}},{{Date.now()}}</h1>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时产生生产提示
    // 创建Vue实例,最好在配置下方
    const x = new Vue({
        //el:document.getElementById('app')
        el:'#app',    //多采用该写法
        data:{
            name:'kdy'//data中用于存储数据,数据供e1所指定的容器去使用。
        }
    });//入参可传递配置对象
    //所谓配置对象,类似axios({})中传递的配置对象。
</script>
</body>
</html>

使用细节

容器和Vue对象之间一一对应的:

若body里两个<div class="app"></div><div class="app"><div> 然后new Vue({el:'.app'})只对第一个容器class未app的容器生效。

若<div id="app">{{name}},{{address}}</div> new Vue({el:'#app' ,data{name:'aaa'}}) new Vue({el:'#app',data:{address:'bbb'}})第二个new Vue的不会生效,只有第一个new Vue的name生效,address没有生效。
注意区分:js表达式和js代码(语句)

1.表达式:一个表达式会生成一个值,可以放在任何一个需要值的地方:

(1). a

(2). a+b

(3). demo(1)

(4). x === y ? 'a' : 'b'

2.js代码(语句)

(1). if(){}

(2). for(){}

Vue开发者工具

vue devtools在谷歌浏览器安装使用,附vue,vue3devtools下载资源_vue3.js tools 谷歌_...咦的博客-CSDN博客
https://pan.baidu.com/s/18GrGCdMqYU0yPphD9V31kQ 提取码:eur4

可在vue开发工具里修改值:

Vue模板

root容器里的代码被称为【Vue模板】

插值语法

{{name}} 与Vue对象中的data中的name绑定

指令语法

相关推荐
gnip7 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫8 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel9 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼9 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手13 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法13 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku13 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode13 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu13 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu13 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript