vue基础

最新推荐文章于 2023-05-17 19:46:30 发布

这蛆烫头了

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量188

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/nuyoahso/article/details/124007199

版权

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

点击跳转前端笔记链接

渐进式：Vue可以自底向上逐层的应用
简单应用：只需-个轻量小巧的核心库
复杂应用：可以引入各式各样的Vue插件

vue作者：尤雨溪
在这里插入图片描述
优点：
1.组件化开发模式，代码复用率高，更好维护
2.声明式编码，无需直接操作DOM，提高开发效率

下载vue devtool

1、初始vue

编写第一个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>
    <!-- 1.引入js文件 -->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
 

    <!-- 2.准备一个容器 -->
    <div id="root">
        <h1>hello,{{name}}</h1>
    </div>

    <!-- 阻止 vue 在启动时生成生产提示 -->
    <script type="text/javascript">
        Vue.config.productionTip = false;

    // 3.创建vue实例
    new Vue({
        el:'#root',  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        //或者 el:document.getElementById('root')
        //class=root,则使用el:'.root'
        data:{    //data用于存储数据，数据工el所指定的容器去使用
            name:'新世界'
        }
    })
    </script>
   
</body>
</html>

总结：初识Vue:

想让:Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
root容器里的代码依然符合html规范，只不过混入了-些特殊的Vue语法
root容器里的代码被称为Vue模板
Vue实例和容器是对应的
真实开发中只有一个Vue实例，并且会配合着组件一起使用
{{xxx}}中的xxx要写js表达式，且xxx 可以自动读取到data中的所有属性
data中的数据发生改变，那么模板中用到该数据的地方也会自动更新

js表达式：
在这里插入图片描述

这蛆烫头了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础

vue是一套用于构建用户界面的渐进式JavaScript框架点击跳转前端笔记链接渐进式：Vue可以自底向上逐层的应用简单应用：只需-个轻量小巧的核心库复杂应用：可以引入各式各样的Vue插件vue作者：尤雨溪优点：1.组件化开发模式，代码复用率高，更好维护2.声明式编码，无需直接操作DOM，提高开发效率下载vue devtool1、初始vue编写第一个vue文件：<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫