VUE

最新推荐文章于 2022-08-19 16:24:09 发布

魔舞清华-方

最新推荐文章于 2022-08-19 16:24:09 发布

阅读量613

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/fyj13925475957/article/details/106193381

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

MMVM 思想

在这里插入图片描述

vue 简介

官网：https://cn.vuejs.org/
在这里插入图片描述

vue 安装

使用 npm 来管理项目
先使用命令： npm init -y 来初始化项目，表示被npm管理
安装Vue：npm install vue

vue HelloWorld

<body>
    <script src="./node_modules/vue/dist/vue.js"></script>

    <div id="app">
        <h1>{{name}}, 非常帅...</h1>
    </div>

    <script>
        // 创建一个vue对象
        let vm = new Vue({
            // 表示vue 管控了 id为 app 的标签
            el: "#app",
            // 管控数据的
            data: {
                name: "张三"
            }
        });

    </script>
</body>

页面输出：
在这里插入图片描述

vue 基本语法

双向绑定，模型变化，视图变化，反之亦然
v-model：模型绑定
v-on: 事件绑定

创建vue实例，关联页面模板，将自己的数据（data）渲染到关联模板，响应式的

<script src="./node_modules/vue/dist/vue.js"></script>

    <div id="app">
        <!-- v-model  表示和vue 绑定，输入的值赋值非 vue data的num属性-->
        <input type="text" v-model="num">
        <!-- 事件绑定： v-on -->
        <button v-on:click="num++">点赞</button>
        <h1>{{name}}, 非常帅，有{{num}}人为他点赞</h1>
    </div>

    <script>
        // 创建一个vue对象
        let vm = new Vue({
            // 表示vue 管控了 id为 app 的标签
            el: "#app",
            // 管控数据的
            data: {
                name: "张三",
                num: 1
            }
        });

        // 双向绑定，模型变化，视图变化，反之亦然
        // 事件绑定 v-on
        // v-xx: 指令

    </script>

v-text、v-html

<body>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <div id=app>
        {{msg}} <br/>
        <span v-html="msg"></span> <br/>

        <span v-text="msg"></span> <br/>

    </div>
    <script>
       new Vue({
           el: "#app",
           data: {
               msg: "<h1>Hello </h1>"
           }
       })
    </script>
    
</body>

在这里插入图片描述

v-bind

给html标签的属性绑定
在这里插入图片描述

v-on、v-for、v-if、v-show

v-on：绑定事件的
v-for：遍历
在这里插入图片描述
v-if、v-show

vue 计算属性和监听器

使用 computed 可以进行计算
在这里插入图片描述

监听器使用
watch 属性
当监听的变量发生改变，会调用监听器
在这里插入图片描述

vue 过滤器

filters 过滤器
在这里插入图片描述

组件化

在这里插入图片描述

代码示例：

<body>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <div id=app>
       <button v-on:click="count++">被点击了{{count}}</button>

       <!-- 模板使用 -->
       <counter></counter>
       <counter></counter>
    </div>
    <script>

        // 模板
        Vue.component("counter", {
            template: `<button v-on:click="count++">被点击了{{count}}</button>`,
            data(){
                return{
                    count: 1 
                }
            }
        });
        
       new Vue({
           el: "#app",
           data: {
               count: 1 
           }
       })
    </script>

页面效果
在这里插入图片描述

vue 生命周期和钩子函数

在这里插入图片描述

vue 模块化开发

在这里插入图片描述

魔舞清华-方

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
VUE

MMVM 思想vue 简介官网：https://cn.vuejs.org/vue 安装使用 npm 来管理项目先使用命令： npm init -y 来初始化项目，表示被npm管理安装Vue：npm install vue
复制链接

扫一扫