vue之基础语法

于 2024-12-11 23:44:08 发布
阅读量320 收藏 7
点赞数 5
分类专栏： vue3 和 jquery 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_48224700/article/details/144402059
版权

大家一起进步，感谢大家的支持和关注

vue 语法

前言

vue就是一个前端框架，借用这个框架可以快速的搭建好看的前端网站。

1.知识储备

  • 有点html 基础
  • 有点javascript基础
  • 有点css基础

2.vue快速上手

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        h1 {
            color: green;
        }

    </style>
</head>

<body>
<!-- 2.指定区域，该区域的内容希望由vue.js来接管。 -->
<div id="app">
    <div>
        <h1>欢迎学习Vue2.js</h1>
        <div>我叫{{name}}，年龄{{age}}</div>

        <input type="button" value="点我" v-on:click="clickMe">
    </div>

</div>

<script>
    // 3.创建Vue对象，并关联指定HTML区域。
    var app = new Vue({
        el: '#app',
        data: {
            name: '蜡笔小新',
            age: 18

        },
        methods: {
            clickMe: function () {
                // 获取值this.name
                // 修改值this.name = "xx"
                this.name = "xxx";
                this.age = 24;
            }
        }
    })
</script>

</body>
</html>

效果
在这里插入图片描述

2.1 插值表达式

{{ }} 里面可以是字符串，可以是表达式，可以是变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
    #app1 {
        border: solid 1px crimson;

        margin-top: 30px;
        margin-left: 30%;
        margin-right: 30%;
    }

    .btn {
        float: left;
    }
</style>
<body>
<div id="app">
    <div id="app1">
        <div>
            <ul>
                <li>{{"xxx"}}</li>
                <li>{{ 1 + 1 + 10 }}</li>
                <li>{{ 1 === 2 ? name : name1}}</li>
            </ul>
            <ul>
                <li>{{ condition ? name : "xxx"}}</li>
            </ul>
            <div>我叫{{name}}，我喜欢{{hobby}}，邮箱:{{dataInfo.email}}</div>
        </div>
        <input type="button" class="btn" value="点我" v-on:click="clickMe">

    </div>


</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: '蜡笔',
            name1: '小新',
            hobby: 'game',
            dataInfo: {
                id: 1,
                email: "xxx.com"
            },
            condition: false,

        },
        methods: {
            clickMe: function () {
                this.name = "蜡笔小新";
                this.condition = true;
                this.dataInfo.email = "xxx@example.com";

            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

2.2 单向绑定v-bind

v-bind: 简写:
JS修改->HTML修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .ig {
            border: 3px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <img src='xx.png' class='c1' />

    <img alt="" v-bind:src="imageUrl" v-bind:class="cls">

</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            imageUrl: 'https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ec61d1aba1464bcfcdc34e5949c76dd5.jpeg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160',
            cls: "ig",
        }
    })
</script>
</body>
</html>

2.3 双向绑定v-model

一般用于在交互的表中中使用，例如：input、select、textarea等。【双向绑定】

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <style>
    #app{
       border: 2px solid gainsboro;
      height: 150px;
      width: 300px;
      margin:30px  40%;
    }
  </style>
</head>
<body>
<div id="app" >
    <div>
        用户名：<input type="text" v-model="user">
    </div>
    <div>
        密码：<input type="password" v-model="pwd">
    </div>
    <input type="button" value="登录" v-on:click="clickMe"/>
    <input type="button" value="重置" v-on:click="resetForm"/>
</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            user: "",
            pwd: "",
        },
        methods: {
            clickMe: function () {
                alert(this.user, this.pwd)
            },
            resetForm: function () {
                this.user = "";
                this.pwd = "";
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <form action="">

        <div>
            用户名：<input type="text" v-model="user">
        </div>
        <div>
            密码：<input type="password" v-model="pwd">
        </div>
        <div>
            性别：
            <input type="radio" v-model="sex" value="1">男
            <input type="radio" v-model="sex" value="2">女
        </div>
        <div>
            爱好：
            <input type="checkbox" v-model="hobby" value="11">篮球
            <input type="checkbox" v-model="hobby" value="22">足球
            <input type="checkbox" v-model="hobby" value="33">评判求
        </div>
        <div>
            城市：
            <select v-model="city">
                <option value="sh">上海</option>
                <option value="bj">北京</option>
                <option value="sz">深圳</option>
            </select>
        </div>
        <div>
            擅长领域：
            <select v-model="company" multiple>
                <option value="11">技术</option>
                <option value="22">销售</option>
                <option value="33">运营</option>
            </select>
        </div>
        <div>
            其他：<textarea v-model="more"></textarea>
        </div>

        <button type="button" v-on:click="clickMe">提交</button>
    </form>
</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            user: "",
            pwd: "",
            sex: "2",
            hobby: ["22"],
            city: "sz",
            company: ["22", "33"],
            more: '...'
        },
        methods: {
            clickMe: function () {
                console.log(this.user, this.pwd, this.sex, this.hobby, this.city, this.company, this.more);
            },
        }
    })
</script>
</body>
</html>

在这里插入图片描述

2.4 循环v-for

用户数据进行循环并展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,idx) in dataList">{{idx}}----{{ item }}</li>
    </ul>
    <ul>
        <li v-for="(item,idx) in cityList">{{item.id}} - {{ item.text}}</li>
    </ul>
    <ul>
        <li v-for="(item,idx) in cityList">
            <span v-for="(v,k) in item">{{k}} {{v}}</span>
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataList: ["lol", "绝地求生", "云顶", "黎明杀机"],
            cityList: [
                {id: 11, text: "上海"},
                {id: 12, text: "北京"},
                {id: 13, text: "深圳"},
            ]
        }
    })
</script>

</body>
</html>

在这里插入图片描述

2.5 事件绑定v-on

v-on:简写@

常见事件
v-on:click
v-on:dblclick
v-on:mouseover
v-on:mouseout
v-on:change
v-on:focus

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-on:click="clickMe">点击</li>
        <li @click="clickMe">点击</li>
        <li v-on:dblclick="doSomething('双击')">双击</li>
        <li v-on:mouseover="doSomething('进入')" v-on:mouseout="doSomething('离开')">进入&离开</li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {},
        methods: {
            clickMe: function () {
                alert("点击了")
            },
            doSomething: function (msg) {
                console.log(msg);
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

2.6 v-if 条件判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <a style="float: right ;margin-right: 20px;color: crimson" v-if="isLogin">
        {{user}}
    </a>
    <a v-else> 游客 </a>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isLogin: true,
            user: "蜡笔小新"
        }
    })
</script>
</body>
</html>

在这里插入图片描述

2.7 v-show 显示和隐藏

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        label {
            width: 60px;
            display: inline-block;
            text-align: right;
            margin-right: 8px;
        }
        .form{
            margin-top: 30px;
            margin-left: 35%;
            border: silver 1px solid;
            width: 300px;
            height: 150px;
        }
        .btn > input{
            margin-left: 8px;


        }
    </style>
</head>
<body>
<div id="app">

    <div class="form">
    <div v-show="isSms">
        <p>
            <label>手机号</label>
            <input type="text" placeholder="手机号">
        </p>
        <p>
            <label>验证码</label>
            <input type="text" placeholder="验证码">
        </p>
    </div>
    <div v-show="!isSms">
        <p>
            <label>用户名</label>
            <input type="text" placeholder="用户名">
        </p>
        <p>
            <label>密码</label>
            <input type="password" placeholder="密码">
        </p>
    </div>
        <div class = "btn">
            <input type="button" value="密码登录" @click="isSms=false"/>
         <input type="button" value="短信登录" @click="isSms=true"/>
        </div>

    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isSms: false,
        }
    })
</script>
</body>
</html>

在这里插入图片描述
由此可以看见v-show 和v-if 的区别

2.8 用户登录

发axios请求,这个其实就是个ajax,服务端我们可以用python的flask框架搭建一个。
前后端交互用axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        method: "post", //post请求
        url: '/login/',
        params: { //携带的查询参数
			token:"0201e010230103100103",
            id:"xxxx"
        },
        data: { //请求体参数
            name:"蜡笔小新",
            pwd:"123"
        },
        headers: { //请求数据类型json格式
            "Content-Type": "application/json"
        }
    }).then(function (res) { //必须传一个参数
        // 成功后返回数据
        alert("ok")
        // 数据统一放在res.data
        console.log(res.data);
    }).catch(function (error) {
        // 失败后的数据
        alert("error")
		console.log(error);
    })
</script>

server.py

前端login.html

2.9 数据的增删改查

在这里插入图片描述
框架代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .penal {
            border: 1px solid #dddddd;
            margin: 20px 0 0 0;
            padding: 10px;
            border-bottom: 0;
            background-color: #d9d9d9;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }

        td, th {
            padding: 8px;
            vertical-align: top;
            border: 1px solid #ddd;
            text-align: left;
        }
    </style>
</head>
<body>

<div id="app">
    <button @click="addBtn">新增</button>
    <h3 class="penal">数据列表</h3>
    <table class="table">
        <thead>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,id) in dataList">
            <td>{{id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
                <button @click="getBtn">查看</button>
                <button @click="updateBtn">修改</button>
                <button @click="delBtn">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataList: [
                {"name": "蜡笔", "age": 18},
                {"name": "小新", "age": 24},
            ]
        },
        methods: {
            addBtn: function () {
                alert("xxx")
            },
            getBtn: function () {
                alert("xxx")
            },
            updateBtn: function () {
                alert("xxx")
            },
            delBtn: function () {
                alert("xxx")
            },

        },
    })
</script>
</body>
</html>

实现
在这里插入图片描述
逻辑代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .penal {
            border: 1px solid #dddddd;
            margin: 20px 0 0 0;
            padding: 10px;
            border-bottom: 0;
            background-color: #d9d9d9;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }

        td, th {
            padding: 8px;
            vertical-align: top;
            border: 1px solid #ddd;
            text-align: left;
        }
    </style>
</head>
<body>

<div id="app">
    <div>
        <h3 v-if="flag===undefined">新建表单</h3>
        <h3 v-else >编辑表单</h3>
        <div>
            <div>
                <label>姓名</label>
                <input type="text" v-model="userInfo.name">
            </div>
            <div>
                <label>年龄</label>
                <input type="text" v-model="userInfo.age">
                <input type="button" :value="title" @click="addBtn">
            </div>
        </div>
    </div>

    <h3 class="penal" style="text-align: left">数据管理</h3>
    <table class="table">
        <thead>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,idx) in dataList">
            <td>{{idx+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
                <button @click="getBtn(idx)">查看</button>
                <button @click="updateBtn(idx)">修改</button>
                <button @click="delBtn(idx)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: "新增",
            flag: undefined,
            userInfo: {
                name: "",
                age: "",
            },
            dataList: [
                {"name": "蜡笔", "age": 18},
                {"name": "小新", "age": 24},
            ]
        },
        methods: {
            addBtn: function () {
                // 在列表最后加一行数据，只需要在dataList添加一个数据
                // 界面交互双向绑定
                // 获取界面数据，赋值保存到列表
                // 清空表单
                if (this.flag === undefined) {
                    // 新增逻辑
                    let row = {"name": this.userInfo.name, "age": this.userInfo.age};
                    this.dataList.push(row);

                } else {
                    // 编辑逻辑
                    this.dataList[this.flag].name = this.userInfo.name;
                    this.dataList[this.flag].age = this.userInfo.age;
                }
                this.userInfo.name = "";
                this.userInfo.age = "";
                this.flag = undefined
                this.title = "新增"

            },
            getBtn: function (idx) {
                // 取到行索引id，打印到页面
                alert(idx)


            },
            updateBtn: function (idx) {
                // 拿到行索引 点击--新建变保存
                // 取出对应的数据到表单
                // 修改表单 获取表单的结果
                // 保存到该行
                this.title = "保存";
                this.flag = idx//用此来判断是编辑还是新增
                let {name, age} = this.dataList[idx];
                this.userInfo.name = name;
                this.userInfo.age = age;
                // 数据后面还是走的新增的逻辑
                // 去新增界面修改


            },
            delBtn: function (idx) {
                // 拿到行索引，删除该行
                this.dataList.splice(idx, 1);
            },

        },
    })
</script>
</body>
</html>

3.vue组件化

3.1 局部组件

先编写局部组件，然后注册，后面引用注册的组件名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1> 当前页面 </h1>
    {{title}}

    <h1> 引入子组件 </h1>
    <Home></Home>
    <ixxx></ixxx>
    <ixxx></ixxx>
        <Home></Home>


</div>
<script>
    //创建子组件
    const Home = {
        data:function() {
            return {
                msg: 'hello world'
            }
        },
        template: `
            <div>
                <h1>{{msg}}</h1>
                <input type="text" v-model="msg"/>
                <input type="button" @click="showMeg" value="点我呀">
            </div>
        `,
        methods: {
            showMeg: function () {
                alert(this.msg);
            }
        }
    }

    //创建子组件
    const Index = {
        // 组件中的data是一个方法，并返回值（与Vue对象创建不同）
        data:function() {
            return {
                dataList: [
                    {"id": 1, "title": "1234"},
                    {"id": 2, "title": "4567"},
                ]
            }
        },
        template: `
            <div>
                <h1>数据列表</h1>
                <table border="1">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>标题</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in dataList">
                        <td>{{item.id}}</td>
                        <td>{{item.title}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        `
    }

    var app = new Vue({
        el: '#app',
        data: {
            title: "欢迎来到智能系统",
        },
        //注册组件到全局
        components: {
            Home,
            ixxx: Index
        },
        methods: {}
    })
</script>
</body>
</html>

在这里插入图片描述

3.2全局组件

和局部组件不同之处，创建组件不加const,默认是var,不用注册，直接引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>当前页面</h1>
    {{title}}

    <h1> 引入子组件 </h1>
    <Home></Home>


</div>
<script>
    //创建子组件
    Vue.component('Home', {
        data: function () {
            return {
                msg: '哈哈哈哈哈'
            }
        },
        template: `
          <div>
          <h1>{{ msg }}</h1>
          <input type="text" v-model="msg"/>
          <input type="button" @click="showMeg" value="点我呀">
          </div>
        `,
        methods: {
            showMeg: function () {
                alert(this.msg);
            }
        }
    });


    var app = new Vue({
        el: '#app',
        data: {
            title: "xx系统",
        },
        methods: {}
    })
</script>
</body>
</html>

4. vue-router路由组件

vue + vue-router组件 可以实现 SPA（single Page Application），即：单页面应用。
单页面应用，简而言之就是项目只有一个页面。
一个页面如何呈现多种界面的效果呢？

小结

基础就到这里了，后面利用脚手架工具写代码，安装包的时候就像python一样简单，感谢大家的关注和支持。

``

vue基础语法
程序员小哲的博客
09-29 2176
插入值：{{}} 插入HTML：v-html 标签属性：v-bind（简写 : ） 条件渲染1：v-if 条件渲染2：v-else 条件渲染3：v-if-else 条件渲染4：v-show（隐藏） 列表渲染：v-for < h3 v-for="(item,index) in names" v-bind:key=“index”>{{item}}{{index}}</ h3> 事件监听：v-on:click（简写 @ ） 输入绑定：v-model ...
Vue的基础语法
m0_65849649的博客
03-21 361
1.什么是vue.js 1、Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 2、Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！ 二、MVC与MVVM的区别 1、MVC是后端的分层开发概念; 2、MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、...
Vue3基础语法
最新发布
一套方法论打通全栈闭环，从 0 到 1 教你驾驭需求、设计、开发、项目、课题、论文和软著，速成全栈王者！
10-13 1005
本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。复用代码, 让setup中的逻辑更清楚易懂。})//向外暴露数据。
(某马培训)Vue-基础语法.ppt
07-23
Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础...
Vue 基础语法 实例演示 示例代码
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例...
vue基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue基本语法
qq_62087717的博客
04-16 3820
1、插值表达式 {{ 、、、 }} 大括号中可以写变量名，对象.属性等，还可以写入js语句 2.变量显示在界面上 v-text： v-html： 两者的区别v-text把内容当纯文本处理，v-html遇到html的标签会当html代码处理 如： v-text: v-html: 3.v-moldel实现双向动态绑定 data:{ username: “” ​ } 当username改变时，页面上的username也会动态改变 页面上的username改变时，data中的us
Vue基本语法
weder的博客
01-15 511
本文Vue模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <tit
vue基础语法1
w18103705129的博客
09-19 546
vue是目前最火的一个前端框架（只关注视图），react是最流行的一个前端框架。 为什么学习前端框架？ 利用框架可以提高开发效率，原生js有一些兼容性（jquery就出现了，解决了兼容性问题），经常去操作dom元素，这时就出现了前端的模板引擎，省去了字符串拼接，但是页面在渲染的时候不会重新对标签进行排序，模板引擎会渲染整个页面，这时候就出现了框架，减少了不比啊哟的dom操作，不用渲染整个页面，...
vue基础语法（轻松入门vue）
猎人在吃肉
07-07 574
喜欢不要忘了点个赞哟demo源码 Vue是一套用于构建用户界面的渐进式框架 Vue的核心库只关注视图层，不仅容易上手，还便于与第三方既有项目整合 vue官网 一、HelloWord 引入vue.js 创建一个带有id的dom 编写vue实例，el挂载点对应HTMLdom，data表示vue实例中的数据 <!--挂载点、模板、与实例 #app这个dom节点在此处为一个挂载点、{{hello}}叫做插值表达式属于模板、vue为一个实例--> <script src="vue.js">
Vue基础语法
qq_52262541的博客
04-10 1199
Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容。 写法：{{XXX}}，XXX是Js表达式，且可以直接读取到date中的所有属性。 2.指令语法： 功能：用于解析标签（包括：标签属性、标签内容、绑定事件…）。 举例：v-bind:href=“XXX” 或简写为：href=“XXX”,XXX同样要写js表达式，且可以直接读取到date中的所有属性。 备注：Vue中有很多的指令，且形式都是：v-???,此处我们只是拿v-bind举个例子。 Vue中有2种数据绑定的方式： 1.单向绑定
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值