VUE基础（一）

最新推荐文章于 2023-05-17 19:46:30 发布

kk_lina

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量142

点赞数

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

本文链接：https://blog.csdn.net/kk_lina/article/details/117222085

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、vue扩展插件

vue-cli:vue脚手架
vue-resource(axios):ajax请求
vue-router:路由
vuex:状态管理
vue-lazyload:图片懒加载
vue-scroller:页面滑动开关
mint-ui:基于vue的UI组件库（移动端）
element-ui基于vue的UI组件库（pc端）

二、vue基本使用

（一） Vuejs安装方式

cdn
选择引入开发环境版本或者生产环境版本
开发环境版本包含有帮助的命令行警告

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	生产环境版本优化尺寸和速度

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

下载和引入
开发环境：https://cn.vuejs.org/js/vue.js
生产环境：https://cn.vuejs.org/js/vue.min.js
NPM安装

npm install vue

（二） HelloWord

Html5模版
使用srcript标签引入vue.js文件
在srcript中new Vue({})
let(变量)/const(常量)

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
    <div id="app">{{message}}</div>
    <script src="../js/vue.js"></script>
    <script>
        // 创建vue实例
        // 声明式编程方式
        const app = new new Vue({
            el: '#app',  //用于挂在要管理的元素
            data:{//数据
                message:'hello word!'
            }
        })
    </script>
    </body>
</html>

列表展示
v-for:“自定义 in 数组”
push在数组后继续添加

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>列表</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="item in movies">{{item}}</li>
            </ul>
        </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好',
                movies:['星际穿越','大话西游','少年派','盗梦空间']
            }
        })
    </script>
    </body>
</html>

事件监听-计数器
v-on:click=“方法名”，方法在methods属性中定义

<!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>
</head>
<body>
    <div id="app">
        <h2>当前计数：{{counter}}</h2>
        <!-- <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button> -->
        <button v-on:click="add">+</button>
        <button @click="sub">-</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                counter:0,
            },
            methods: {
                add:function(){
                    this.counter++;
                    console.log('add被执行');
                },
                sub:function(){
                    this.counter--;
                    console.log('sub被执行');
                },
            },
        })
    </script>
</body>
</html>