Vue学习（一）———— 第一个小例子、插值语法、指令语法

最新推荐文章于 2022-09-29 11:24:36 发布

木鱼非鸟

最新推荐文章于 2022-09-29 11:24:36 发布

阅读量223

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45734378/article/details/119116310

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了Vue的基础知识，包括如何创建第一个Vue实例，以及模板语法的两个关键概念——插值语法和指令语法。插值语法用于解析HTML标签内的文本，而指令语法则用于处理标签属性、内容和事件绑定。

摘要由CSDN通过智能技术生成

文章目录

- Vue基础

Vue基础

第一个小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <script src="static/vue.js" type="text/javascript"></script>
</head>
<body>
<!--
    初始Vue
    1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
    2.root容器里面的代码依然符合html规范，不过混入了一给特殊的Vue语法
    3.root容器里面的代码称为[Vue模板]

    注意区分js表达式和js语句（代码）
    表达式(一个表达式会产生一个值，可以放在任何需一个需要值的地方)
        1.a
        2.a + b
        3.demo(1)
        4.x === y ? 'a' : 'b'
    语句
        1.if(){}
        2.for(){}

    4.容器和vue实例是一一对应的关系
    5.在真实开发中只有一个vue实例，并且会配合组件一起使用
    6.{{xxx}}}，xxx要写js表达式，并且xxx可以自动读取到name属性中的值
    7.一旦data中的数据发生了变化，那么模板中的用到该数据中的地方也会发生更新
-->
<div id="root">
    <h1>Hello {{name}}！</h1>
</div>

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

    //创建Vue实例
    new Vue({
        el: '#root'//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串（将Vue和容器进行一个绑定）
        ,data: {//用于存储数据，数据供el所指向的容器使用，值先暂时写成一个对象
            name: 'China'
        }
    })
</script>
</body>
</html>

容器和vue实例是一一对应的关系

模板语法

插值语法

<div id="d">
    <h1>你好，{{name}}</h1>
</div>

<script type="text/javascript">
    new Vue({
        el: '#d'
        ,data: {
            name: 'China'
        }
    })
</script>

指令语法

<div id="d">
<!--    使用v-bind:会将url看成js表达式进行使用-->
    <h1><a v-bind:href="url">去百度</a> </h1>
<!--    v-bind: 可以简写成 :-->
    <h1><a :href="school.url">去百度</a> </h1>
</div>


<script type="text/javascript">
    new Vue({
        el: '#d'
        ,data: {
            ,url: 'https://www.baidu.com'
            ,school: {
                url: 'https://www.baidu.com'
            }
        }
    })
</script>