Vue学习笔记2

最新推荐文章于 2024-11-05 15:56:29 发布

LinMint

最新推荐文章于 2024-11-05 15:56:29 发布

阅读量94

点赞数

文章标签：学习 vue.js 前端框架

原文链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=7&spm_id_from=pageDriver#:~:text=%E5%B0%9A%E7%A1%85%E8%B0%B7Vue2.0%2BVue3.0%E5%85%A8%E5%A5%97%E6%95%99%E7%A8%8B%E4%B8%A8vuejs%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A

版权

Vue模板语法有2大类:

1.插值语法
功能:用于解析标签休内容。
写法:{ixxx}]，xxx是js表达式,且可以直读取到data中的所有战性。

2.指令语法:
功能:用于解析标签（包括:标签属性、标公体内容、绑定事件.....) 。
举例:v-bind:href="xxx”或简写为 :href="xxx"。xxx同样要写js表达式。
且可以直接读写到data中的所有属性。
备注:Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。

一.模板语法

1.插值语法

2.指令语法

v-bind:xxx 绑定语法

v-bind:href="url" 【url】被当作js表达式去使用，给href标签动态绑定ur的值。

v-bind 可以简写成冒号【 : 】

插值语法用在标签体中，eg：<h1></h1>

指令语法用于标签中。

练习的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <!-- 引用Vue  -->
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器   -->
    <div id="root">
        <h1>哈哈我是插值语法{{name}}</h1>
        <hr/>
        <h1>指令语法</h1>
        <!-- 正确：v-bind:href="url"     错误：v-bind: href="url"-->
        <a v-bind:href="url">点我去百度一下</a>
        <a :href="person.url">{{person.name}}再点我去百度一下</a>

    </div>


<script type="text/javascript">
    Vue.config.productionTip = false;//阻止vue在启动时生成生产提示
    //创建vue实例
    new Vue({
        // el:document.getElementById('root');//亲自选择
        el:'#root', //自动选择,el用于指定当前VUE实例为那个容器服务，值通常为css选择器字符串
        data:{//data中用于存储数据，数据供el所指定的容器使用。值暂时写出一个对象
            name:'张三',
            url:"https://www.baidu.com/",
            person:{
                name:'李四',
                url:"https://www.baidu.com/"
            }
        }
    })
</script>
</body>
</html>

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通https://www.bilibili.com/video/BV1Zy4y1K7SH?p=7&spm_id_from=pageDriver#:~:text=%E6%8A%95%E7%A8%BF-,%E5%B0%9A%E7%A1%85%E8%B0%B7Vue2.0%2BVue3.0%E5%85%A8%E5%A5%97%E6%95%99%E7%A8%8B%E4%B8%A8vuejs%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A,-402.5%E4%B8%87