Vue2 入门

布织锁云

已于 2023-06-09 16:44:05 修改

阅读量69

点赞数

文章标签： vue

于 2023-06-02 10:00:54 首次发布

本文链接：https://blog.csdn.net/qq_52731478/article/details/130990986

版权

官网

https://v2.cn.vuejs.org/

Vue.js的主要特点

轻量级的框架
双向数据绑定
可复用的组件
前端路由技术
状态管理
虚拟DOM

html使用Vue

方法一：下载引入
https://v2.cn.vuejs.org/v2/guide/installation.html
方法二：CDN引入
开发版本

生产版本

方法三：npm安装
npm init -y
npm i vue.js@2.7.14

入门

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <!-- 挂载点（vue容器） -->
    <div class="app">
        <!-- {{}}差值表达式 mastch语法 -->
        <h2>品名：{{pname}}</h2>
        <h2>价格：{{price}}</h2>
        <h1>{{title}}</h1>
        <ul>
            <!-- index即索引 -->
            <li v-for="(item,index) in list" :key="index">
                {{index}}:{{item}}
            </li>
        </ul>
    </div>

    <script>
    	Vue.config.productionTip = false		//关闭生产提示
        // 创建vue实例
        const vm = new Vue({            //vm Vue{}
            el:'.app',  //指定容器
            data:{      //指定数据      修改数据，上面的数据也会随之变化
                pname:'小米',
                price:6999,
                title:'商品列表',
                list:['小米','华为','OPPO']
            }
        })

        vm.list.push('vivo')    //vue实现了数组方法的重写
        vm.list[0]='小米1'      //报错，只能通过索引读取不能修改
    </script>

</body>
</html>

// 控制台
vm.list.push(‘vivo’) //vue实现了数组方法的重写能够实现页面更新
vm.list[0]=‘小米1’ //无法实现页面更新，但data数据已经改变

vue2样式引入

main.js

import '../public/css/public.css'

??.vue

<style>
@import '../../public/css/public.css'
</style>

Vue2&3 vscode提示

在这里插入图片描述

Vue2 浏览器拓展程序