Vue学习笔记||创建一个vue实例以及部分语法

最新推荐文章于 2024-07-25 07:30:00 发布

奋斗音音

最新推荐文章于 2024-07-25 07:30:00 发布

阅读量479

点赞数 16

分类专栏： vue学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Saala/article/details/135351592

版权

vue学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first Vue</title>
    <script type="text/javascript" src="../JS/JS/vue.js"></script>
</head>

<body>

    <!-- 
    1、想让vue工作必须，创建一个vue实例，且要传入配置对象
    2、root容器里的代码依然符合html规范，只是混入了一些特殊的Vue语法
    3、root容器里的代码被称为Vue模板
    4、一个vue实例 不能同时接管两个容器，实例与容器一一对应
    5、真实开发中只有一个vue实例，并且会配合组件一起使用
    6、{{内要写js表达式}}，且【可以自动读取到data中的所有属性；
      1.表达式：一个表达式生成一个值，可以放到任何需要值的地方
      2.js代码（语句）
    7、一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

     -->
    <!-- 容器 -->
    <div id="root">
        <h1>HELLO {{name}}!</h1><!-- {{}}内只能写js表达式 -->
    </div>


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

        // 创建vue实例
        new Vue({//el:element元素
            el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: {//data中用于存储数据，数据供el所指定的容器使用
                name: 'world',

            }
        })
        


    </script>
</body>

</html>

模板语法

插值语法

指令语法

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first Vue</title>
    <script type="text/javascript" src="../JS/JS/vue.js"></script>
</head>


<body>


    <!--
        vue模板语法有两大类：
        1、插值语法：{{xxx}},xxx是js表达式，可以直接读取到data中的所有属性
        2、指令语法：功能：用于解析标签（标签属性、标签体内容、绑定事件）
          v-bind:href="xxx"简写为   ：href="xxx",xxx同样要写成js表达式
        vue中很多指令，形式都是v-xxx,
    -->


    <!-- 容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>hello,{{name}}</h3>
        <h1>指令语法</h1>
        <a v-bind:href="url.toUpperCase()"  x="hello">点我介绍</a> 
        
   
    </div>
    </body>



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


        // 创建vue实例
        new Vue({//el:element元素
            el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: {//data中用于存储数据，数据供el所指定的容器使用
                name: 'world',
                url:'http://www.atguigu.com',


            }
        })
        



    </script>


</html>