vue复习(一)

一、认识Vue

定义：一个构建数据驱动的Web界面的渐进式框架

优点：

　　1、可以完全通过客户端浏览器渲染页面，服务器端只提供数据

　　2、方面构建单页面应用程序(SPA)

二、引入Vue

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue导入</title>

</head>
<body>
    <div id="app">
        <p title="普通p">p标签</p>
        <!-- v-bind vue的指令，可以被vue解析并处理 -->
        <!-- 第一个title：html标签的属性名(系统预定义的) -->
        <!-- 第二个titile：vue的变量 -->
        <p v-bind:title=‘title‘>p标签</p>
    </div>
</body>
<!-- 引入外部vue js -->
<script type="text/javascript" src="./js/vue.js"></script>
<!-- 自身 js -->
<script type="text/javascript">
    // 创建vue实例，需要一个对象参数
    new Vue({
        el: ‘#app‘,
        data: {
            title: ‘vue p‘
        }
    })
</script>
</html>

三、Vue实例

实例：el

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue实例之el</title>
</head>
<body>
    <div id="root"></div>
    <!-- <p v-bind:class="title" v-on:dblclick=‘action‘ v-model=‘abc‘ v-for="it in its"></p> -->
    <p v-bind:title=‘title‘>p标签</p>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    // el: vue实例的挂载目标
    // 表示vue创建的该实例只对挂载点内部的模块进行处理
    new Vue({
        el: ‘#root‘,
        data: {
            title: ‘vue p‘
        }
    })
</script>
</html>

数据：data

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue data</title>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <!-- 出现在模块中的变量，一般都需要默认初始值 -->
        <p v-text=‘txt‘></p>
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: ‘#app‘,
        // data为模块中的变量提供数据
        data: {
            msg: ‘vue 控制的 文本1‘,
            txt: ‘vue 控制的 文本2‘,
        }
    });
    console.log(app)
    // el | data 为 vue变量 => 以$开头，区别普通变量
    console.log(app.$data)
    console.log(app.$data.msg)
    // 所有在模块中产生的变量，也可以通过vue的实例直接访问
    console.log(app.msg)

</script>
</html>

方法：methods

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue data</title>
    <style type="text/css">
        .p1 {
            width: 300px;
            height: 100px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-on指令用于绑定事件 -->
        <!-- 事件对应逻辑由vue实例的methods处理 -->
        <!-- 绑定的事件(函数)需不需要携带参数列表： 无=>无需传参 有=>需要传参 -->
        <!-- 需要操作事件(需要事件对象)无需传参，传参后会都是事件 -->
        <p class="p1" v-on:click=‘func‘>{{ msg }}</p>
        <p class="p1" v-on:click=‘fn("zero", 88888)‘>{{ msg }}</p>
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: ‘#app‘,
        data: {
            msg: ‘vue context‘
        },
        methods: {
            func: function (obj) {
                // alert(‘呵呵‘)
                // this: vue实例 => app
                // alert(this.msg)
                console.log(obj)
            },
            fn: function (name, salary) {
                console.log(name)
                console.log(salary)
            }
        }
    });
</script>
</html>

计算属性：computed

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>computed</title>
</head>
<body>
    <div id="app">
        <div>
            姓：<input type="text" v-model=‘first_name‘ />
        </div>
        <div>
            名：<input type="text" v-model=‘last_name‘ />
        </div>
        <!-- <p>姓名：{{ full_name() }}</p> -->
        <!-- 采用计算方式的变量可以不在data中赋初值 -->
        <p>姓名：{{ full_name }}</p>
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: ‘#app‘,
        data: {
            first_name: ‘‘,
            last_name: ‘‘
        },
        // methods: {
        //     full_name: function () {
        //         return this.first_name + " " + this.last_name;
        //     }
        // },
        // 一个变量依赖于多个变量，一般对该变量采用计算处理
        computed: {
            full_name: function () {
                return this.first_name + " " + this.last_name;
            }
        }
    })
</script>

</html>

监听器：watch

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>computed</title>
</head>
<body>
    <div id="app">
        <div>
            姓名：<input type="text" v-model=‘full_name‘ placeholder="姓与名以空格隔开" />
        </div>
        <p>姓：{{ first_name }}</p>
        <p>名：{{ last_name }}</p>
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: ‘#app‘,
        data: {
            full_name: ‘‘,
            first_name: ‘‘,
            last_name: ‘‘
        },
        watch: {
            full_name: function () {
                // 监听full_name，然后拆分为姓与名
                var fname = this.full_name;
                var arr = fname.split(‘ ‘);
                this.first_name = arr[0];
                this.last_name = arr[1];
            }
        }
    })
</script>

</html>

分隔符：delimiters

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>delimiters</title>
</head>
<body>
    <div id="app">
        {{ msg }} [[ msg ]] ${ msg }
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: ‘#app‘,
        data: {
            msg: ‘数据‘
        },
        // delimiters配置自定义绑定符号
        // 值为拥有两个元素的数组，元素为字符串形式
        delimiters: [‘${‘, ‘}‘]
    })
</script>

</html>

实例对象使用成员属性和方法

<script>
    var app = new Vue({
        el: ‘#app‘,
        data: {
            msg: ‘message‘
        }
    })
    console.log(app)
    console.log(app.$el)
    console.log(app.$data.msg)
    console.log(app.msg)
</script>

四、实例生命周期钩子

定义：

　　每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

钩子方法：

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。

beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。

updated：数据更新时调用，发生在虚拟 DOM 打补丁之前。

activated：keep-alive 组件激活时调用。

deactivated：keep-alive 组件停用时调用。

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

errorCaptured：2.5.0+ 新增，当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

重点钩子：

created：实例完全创建完毕(属性与方法都准备就绪)。可以进行数据操作(请求后台数据，重新渲染最新数据)

mounted：虚拟DOM构建完毕，并完成实例的el挂载。可以重新操作页面DOM

钩子函数实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>生命周期钩子</title>
</head>
<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: ‘#app‘,
        data: {
            msg: ‘数据‘
        },
        // 该钩子方法触发：vue实例刚被创建(只拥有内存位置),其他任何操作都未执行
        // 就满足的beforeCreate钩子的触发条件，系统就会回调该方法的实现
        // 用户在该触发条件情况下想去完成某些逻辑，那么就去实现该钩子
        beforeCreate: function () {

        },
        /*
        // 系统内部调用
        if (beforeCreate) {
            beforeCreate()
        }
        // ...
        // ...
        if (created) {
            created()
        }
        if (beforeMount) {
            beforeMount()
        }
        // ...
        */

        // 数据与事件加载完毕，el并没有进行挂载
        created: function () {
            // 获取想要的数据(请求后台)
            // 事件的解绑或换绑或重新绑定
            // 对虚拟DOM进行修改
        },
        // DOM树加载完毕，el渲染完毕
        mounted:function () {
            // 可能需要对DOM进行操作(交给模块处理)
        }
    })
</script>

</html>

五、视图常规操作

v-text：文本变量

<p v-text=‘msg‘></p>
<p>{{ msg }}</p>

v-once：一次性文本赋值

<p v-once>{{ msg }}</p>

v-html：html文本变量

<p v-html=‘msg‘></p>
<script>
    new Vue({
        el: ‘#app‘,
        data: {
            msg: ‘<b>文本</b>‘
        }
    })
</script>

v-bind：属性绑定

<div id="app">
    <img v-bind:src=‘imgSrc‘ />
    <!-- 简写 -->
    <img :src=‘imgSrc‘ />
</div>
<script>
    new Vue({
        el: ‘#app‘,
        data: {
            imgSrc: ‘https://www.baidu.com/favicon.ico‘
        }
    })

v-model：双向数据绑定

<div id="app">
    <input type="text" v-model=‘msg‘>
    <p>{{ msg }}</p>
</div>
<script>
    new Vue({
        el: ‘#app‘,
        data: {
            msg: ‘‘
        }
    })
</script>

v-cloak：避免页面加载闪烁

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app" v-cloak>

</div>

视图自身运算

<div id="app" v-cloak>
    <p>{{ 1 + 1 }}</p>
    <p>{{ [1, 2, 3].join(‘@‘) }}</p>
</div>

视图相关操作实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>视图</title>
    <style type="text/css">
        p {
            border: 1px solid #ff6700;
            height: 30px;
            line-height: 30px;
        }
        .abc {
            border-color: yellowgreen;
        }
        [class] {
            border-width: 5px;
        }

        [v-cloak] {
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <!-- <div id="app" v-cloak> -->
    <div id="app">
        <!-- v-model实现数据的双向绑定 -->
        <input type="text" v-model=‘msg‘>
        <input type="text" v-model=‘msg‘>
        <p>{{ msg }}</p>
        <p v-text=‘msg‘></p>
        <!-- 只赋值一次 -->
        <p v-once>{{ msg }}</p>
        <!-- 可以解析html语法的标签 -->
        <p v-html=‘msg‘></p>

        <!-- 属性的绑定：属性值有变量控制 v-bind:属性名 :属性名 -->
        <!-- <p class="active"></p> -->
        <!-- <p v-bind:class=‘active‘></p> -->
        <p :class=‘active‘></p>

        <!-- 事件的绑定：事件值为函数名(带或不带参数列表) v-on:事件名 @事件名 -->
        <p @dblclick=‘func‘></p>

    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: ‘#app‘,
        data: {
            msg: ‘初值‘,
            active: ‘abc‘
        },
        methods: {
            func: function () {
                alert(‘呵呵‘)
            }
        }
    })
</script>
</html>

六、条件渲染

七、列表渲染

原文地址：https://www.cnblogs.com/sui776265233/p/9756426.html

时间： 2024-10-17 04:46:30

vue复习(一)的相关文章

vue复习(二)

一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点 每个组件模板只能拥有一个根标签 子组件的数据具有作用域,以达到组件的复用 二.局部组件 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>局部组件</title> <script type=&

vue 复习篇. 注册全局组件,和 组件库

初篇 ============================================================== 1. 编写loading组件(components/Loading/index.vue) <template> <div>loading</div> </template> <script> export default { name: 'loading' } </script> 2.注册为全局组件 (c

学习vue

今天把以前学过的vue复习了一遍,觉得当时学的不怎么样.所以就好好复习了基础知识,都是些非常基础的vue知识点 代码我放在GitHub 上了 如果访问不了访问这个 o(￣▽￣)ブ?????? 学习使用 vue one vue 基本结构 vue 实例控制 html 元素区域,就是我们 new 出来的 vue 实例,当我们导入包之后,在浏览器的内存中,就多了一个 Vue 构造函数 el 表示要控制哪个区域 我们 new 出来的这个 vm 对象,就是我们 MVVM 中的 VM 调度者,data 中的数

vue路由复习（转载）

回头看 vue-router 复习 我的github iSAM2016 目录 响应路由参数的变化 嵌套路由 函数式导航 路由的命名 示例:切换路由的时候可以修改页面的标题 导航钩子 全局钩子 实例:检测用户登录 路由元信息 路由对象信息 Router 实例 $router.options 中途有一段时间去隔壁家的php玩了一遭,回头看来,vuex.vue-router有了改变,一开始就对vue-route的细节不是很了解,今天总结一下. 官网的例子: 自己的一句话: 定义路由组件(汽车) con

vue 初始复习

vue 初始复习 data 中的数据最终都是挂载到 vm 实例中 template 属性会整个代替 app 的内容 el 的优先级高于.$mount 指令 v-text:相当于小胡子{{}} -->v-text='name' v-html:可以渲染字符串中的标签 -->v-html='name' v-once:该标签只渲染一次 -->后面不加内容 v-cloak:解决网速慢时显示小胡子的问题 -->后面不加内容 v-pre:有这个属性的元素,vue 不会对该元素及所有子元素进行 D

【Vue-01】基础Vue语法+JS复习

Vue学习疑问及总结_SZS 1.变异方法 (重写:重新实现) Vue包含异族观察数组的变异方法,所以他们将会触发视图更新;这些方法如下: push()/pop()/shift()/unshift()/splice()/sort()/reverse() 2.splice 进行删除.增加和替换 methods:{ deleteP(index){ //删除persons中指定的index的p this.persons.splice(index,1) }, updateP(index,newP){ /

Django复习

一.Django安装与配置: 1.windows终端:pip install django 安装成功后在python配置好环境变量的情况下创建django目录: 命令: # 创建Django程序 django-admin startproject mysite # 进入程序目录 cd mysite # 启动socket服务端,等待用户发送请求 python manage.py runserver 127.0.0.1:8080 2.项目基本目录结构: app01:代码处理目录,可以在终端输入 py

Vue指令总结---小白同学必看

今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪吧. v-text :string  用法:更新元素的textContent,更新部分的textContent,需要使用{{Mustache}}插值 v-html: string 用法:更新元素的innerHTML:注意:网站动态渲染任意HTML,容易导致XXS攻击 v-show:any 用法:根据

Vue 进阶教程之：详解 v-model

分享 Vue 官网教程上关于 v-model 的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下, 并介绍 Vue 2.2 v-model改进的地方,然后穿插的再说点 Vue 的小知识. 在 Vue 中,有许多方法和 Angular 相似,这主要是因为 Angular 是 Vue 早期开发的灵感来源.然而,Augular 中存在许多问题,在 Vue 中已经得到解决. v-model 用在 input 元素上时 v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model