Vue是什么？

最新推荐文章于 2024-06-14 10:39:01 发布

高手代雪玉

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量146

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zyf1280407168/article/details/127913600

版权

1.Vue核心

1.1. Vue官网

1.2. 介绍与描述

动态构建用户界面的渐进式JavaScript框架
作者：尤雨溪

1.3. Vue的特点

遵循MVVM模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
它本身只关注UI，可以引入其它第三方库开发项目

1.4. Vue周边库

vue-cli：vue脚手架
vue-resource
axios
vue-router：路由
vuex：状态管理
element-ui：基于vue的UI组件库（PC端）

2.0 初写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>初识vue</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello！{{name}}!</h1>
    </div>

    <script>
        Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
        new Vue({
            el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{ //data用于存储数据，数据共el所指定的容器去使用
                name:'JOJO'
            }
        })
    </script>
</body>
</html>

效果：

注意：

    想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
    root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
    root容器里的代码被称为Vue模板
    Vue实例与容器是一一对应的
    真实开发中只有一个Vue实例，并且会配合着组件一起使用
    {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
    一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新

数据绑定

<!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="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name">
    </div>

    <script>
        Vue.config.productionTip = false 
        new Vue({
            el:'#root', 
            data:{
                name:'JOJO'
            }
        })
    </script>
</body>
</html>

效果：

总结：

    Vue中有2种数据绑定的方式：
        单向绑定（v-bind）：数据只能从data流向页面
        双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data

    备注：
        双向绑定一般都应用在表单类元素上（如：<input>、<select>、<textarea>等）
        v-model:value可以简写为v-model，因为v-model默认收集的就是value值

el与data

<!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>el与data的两种写法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>Hello,{{name}}!</h1>
    </div>

    <script>
        Vue.config.productionTip = false 
        //el的两种写法：
        // const vm = new Vue({
        //     // el:'#root', //第一种写法
        //     data:{
        //         name:'JOJO'
        //     }
        // })
        // vm.$mount('#root')//第二种写法

        //data的两种写法：
        new Vue({
            el:'#root', 
            //data的第一种写法：对象式
            // data:{
            //     name:'JOJO'
            // }
            //data的第二种写法：函数式
            data(){
                return{
                    name:'JOJO'
                }
            }
        })
    </script>
</body>
</html>

el有2种写法：