首页 > 其他分享 >初识Vue

初识Vue

时间:2023-01-09 15:45:46浏览次数:36  
标签:el Vue name 初识 address data

初识Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识Vue</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <!-- 
        初识Vue:
            1、想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
            2、root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
            3、root容器里的代码被称为【Vue模板】;
            4、Vue容器和实例是一一对应的
            5、真实开发中只有一个Vue实例,并且会配合着组件一起使用
            6、{{xxx}}中的xxxx要写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(){}
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello,{{name.toUpperCase()}},{{address}}</h1>
    </div>

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

        //创建Vue实例
        new Vue({
            el:'#root', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
            data:{//data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象
                name:'尚硅谷',
                address:'北京昌平'
            }
        })
    </script>
    
</body>
</html>

标签:el,Vue,name,初识,address,data
From: https://www.cnblogs.com/tanhongwei/p/17037244.html

相关文章

  • 初识C语言
    什么是C语言C语言是一门计算机语言,计算机语言是人和计算机交流的语言计算机语言包括C/C++,Java,python计算机语言的发展二进制语言计算机通电,而电压只有正负,所以用二进制语言......
  • vue+elementUI 实现内容区域高度自适应
    //defaultHeight是绑定的属性<el-main:style="defaultHeight"><router-view/></el-main>//注意:这里的defaultHeight必须是对象,不懂的可以去官网看下apidata(){......
  • vue-awesome-swiper与vue2的版本对应关系
    1.安装  注意:这里一定要对应swiper 和vue-awesome-swiper版本,如果不对应,vue就会各种报错  2.引入2.1全局引入main.js  2.2局部引入    3......
  • 视频直播app源码,vue实现列表自动滚动的方式
    视频直播app源码,vue实现列表自动滚动的方式设置定时器,每三秒,让列表向上移动一行的高度,然后当最后一条数据出现时,在下一个三秒后,恢复到初始状态。 下面是上面描述的代码......
  • NETCORE + VUE + SignalR 消息通信
     NETCORE+VUE+SignalR消息通信  分组通信:https://blog.csdn.net/qbc12345678/article/details/125215711 一.创建Net6WebApi项目NETCORE.TSignalR1.......
  • 关于vue :style 的几种使用方式
    :style的使用一,最通用的写法 <p:style="{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p>二,三元表......
  • Vue的hash/history模式
    hash路由模式URL中的hash值只是客户端的一种状态,向服务端发送请求的时候,hash部分不会被发送;hash值得改变会在浏览器的历史记增加访问记录,所以可以通过浏览器的回退......
  • vue3+vite2 vite.config.js 配置
    vite配置官方文档:https://cn.vitejs.dev/config/shared-options.html#base 开发服务器选项-serverserver:{//host:指定服务器应该监听哪个ip地址。如果设置为......
  • vue2 element-ui组件二封-表单组件-按钮封装
    这里是一段我们公司过往项目的代码(增删改查项目中的查询/重置按钮)<el-button@click="query()"type="primary"size="mini"><iclass="el-icon-search">查询</i><......
  • vue2组件props;computed监控变量,watch执行方法
    props:{mesData:{type:Object,//接受父组件值required:true,},tableLod:{type:Function,......