vue入门案例和介绍

铭曱

已于 2022-05-05 17:57:51 修改

阅读量765

点赞数

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

于 2022-05-05 17:38:07 首次发布

本文链接：https://blog.csdn.net/qq_41486847/article/details/124593666

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

官网：介绍 — Vue.js

引入vue

链接：https://download.csdn.net/download/qq_41486847/85292264

引入

  <script src="/vuehtml/js/vue.js"></script>

插值语法：功能: 用于解析标签体内容

语法: {{xxx}} ，xxxx 会作为 js 表达式解析

指令语法

1. 功能: 解析标签属性、解析标签体内容、绑定事件

2. 举例：v-bind:href = 'xxxx' ，xxxx 会作为 js 表达式被解析

3. 说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

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></title>
    <script src="/vuehtml/js/vue.js"></script>
</head>
<body>
    
    <div id="root">
        
        <a v-bind:href="url"><h1>{{name}}</h1></a>
        <a :href="url"><h1>{{name}}</h1></a>
       
    </div>
    <script>
        Vue.config.productionTip=false

    new Vue({
        el:'#root',
        data:{
            name:'点击',
            url:'https://www.baidu.com'
        }
    })
        
    </script>
    
</body>
</html>

单向数据绑定和双向数据绑定

<body>
    <div id="root">
            单向数据绑定
            <input type="text" v-bind:value="name">
            双向数据绑定
            <input type="text" v-model:value="name">
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                name:'12'
            }
        })
    </script>
    
</body>

铭曱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门案例和介绍

官网：介绍 — Vue.js引入vue链接：https://download.csdn.net/download/qq_41486847/85292264引入 <script src="/vuehtml/js/vue.js"></script>插值语法：功能: 用于解析标签体内容语法: {{xxx}} ，xxxx 会作为 js 表达式解析指令语法 1. 功能: 解析标签属性、解析标签体内容、绑定事件 2. 举例：v...
复制链接

扫一扫

专栏目录