vuejs（一）

最新推荐文章于 2024-05-25 12:06:33 发布

丑八怪223

最新推荐文章于 2024-05-25 12:06:33 发布

阅读量195

点赞数

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

本文链接：https://blog.csdn.net/msn131420/article/details/123380982

版权

前端专栏收录该内容

35 篇文章 1 订阅

订阅专栏

一、认识Vuejs

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

二、Vuejs安装方式--3种

使用一个框架，我们第一步要做什么呢？安装下载它
安装Vue的方式有很多：

方式一：直接CDN引入

你可以选择引入开发环境版本还是生产环境版本

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

（开发环境：源码没有经过压缩，可以直接查看源码，学习阶段使用CDN更慢）

方式二：下载和引入

（前期学习使用这个，后续学习CLI使用NPM）

开发环境

生产环境

方式三：NPM安装

后续通过webpack和CLI的使用，我们使用该方式。

三、Vuejs初体验----数据和界面分离--响应式

3.1.Hello Vuejs

创建Vue对象的时候，传入一些options:{}

{}中包含了el属性：该属性决定了这个Vue对象挂载到那一个元素上

{}中包含了data属性：该属性中通常会存储一些数据，数据可以是直接定义的；也可以是从服务器加载的

<div id="app">
    <h1>{{message}}</h1>
    <h2>{{name}}</h2>
</div>
 
<script>
    // 申明式编程
    let app = new Vue({
        el: "#app", //用于挂载要管理的元素
        data: { //定义数据
            message: '你好啊，李银河',
            name: "codewhy"
        }
    })
</script>

 
<body>
 
<div id="app">
    <h2>{{message}}</h2>
    <h1>{{name}}</h1>
</div>
 
<div>{{message}}</div>
 
<script src="../js/vue.js"></script>
<script>
    // 源码里面有类似于这样的东西 有一个Vue的类 可以往里面传一些参数 Vue的参数是对象类型
    function Vue(){
 
    }
</script>
<script>
    // let(变量)/const(常量)
    
    // 编程范式: 声明式编程 实例管理div时，只需声明显示什么东西
    const app = new Vue({
        el: '#app', // 用于挂载要管理的元素
        data: { // 定义数据
            message: '你好啊,李银河!',
            name: 'coderwhy'
        }
    })
 
    // 原始js的做法(编程范式: 命令式编程) 明确告诉一步步该如何做
    // 1.创建div元素,设置id属性
 
    // 2.定义一个变量叫message
 
    // 3.将message变量放在前面的div元素中显示
 
    // 4.修改message的数据: 今天天气不错!
 
    // 5.将修改后的数据再次替换到div元素
 
 
    // Vue的响应式 --> 可以在打印台修改 app.name='yyy'
</script>
 
</body>

3.2.Vue列表显示

展示数据列表：使用v-for指令

<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: {
            movies : ['星际穿越', '大话西游', '少年派', '盗梦空间']
        }
    })
</script>

传统改变ul>li内容和vue的v-for遍历内容的区别
响应式：app.movies.push("龙猫")，页面直接就显示新增内容，而传统的dom操作需要创建一个li，然后再加内容

<body>
    <!-- vue替代遍历列表内容 -->
    <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>
 
    <!-- 传统dom遍历列表内容 -->
    <ul class="con">
        <li>{{movies[0]}}</li>
        <li>{{movies[1]}}</li>
        <li>{{movies[2]}}</li>
        <li>{{movies[3]}}</li>
    </ul>
    <script>
        document.querySelector('.con').querySelectorAll('li')[0].innerHTML = "功夫"
        document.querySelector('.con').querySelectorAll('li')[1].innerHTML = "千与千寻"
        document.querySelector('.con').querySelectorAll('li')[2].innerHTML = "肖申克救赎"
        document.querySelector('.con').querySelectorAll('li')[3].innerHTML = "泰坦尼克号"
    </script>
</body>

3.3.案例：计数器

现在，我们来实现一个小的计数器点击
+ 计数器+1，点击 - 计数器 -1

属性：methods,该属性用于在Vue对象中定义方法

指令：@click,是v-on:click的简写（语法糖）,用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法

<div id="app">
    <h2>当前计数：{{counter}}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter&#45;&#45;">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
 
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add: function () {
                console.log('add会执行')
                this.counter++
            },
            sub: function () {
                console.log('sub会执行')
                this.counter--
            }
        }
 
    })
</script>

四、Vuejs的MVVM

MVVM：MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

View层：

视图层
在我们前端开发中，通常就是DOM层。
主要的作用是给用户展示各种信息。

Model层：

数据层
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

VueModel层:

视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

五、Vue中的options

5.1.创建Vue实例传入的options

创建new Vue（{})的时候，就传入了一个options对象

目前掌握这些选项：

方法和函数的区别：

5.2.Vue的生命周期

生命周期: 事物从诞生到消亡的整个过程
官网详细描述
Vue的生命周期图示
英文版

vue中生命周期分为初始化，跟新状态，销毁三个阶段

1.初始化阶段：beforeCreated，created，beforeMount，mounted

2.跟新状态：beforeUpdate，update

3.销毁vue实例：beforeDestory，destoryed

其中created/mounted 可以用来发送ajax请求，启动定时器等异步任务

beforeDestroy用来收尾工作，如清除定时器

new Vue()---实例化vue对象

beforeCreate()---创建实例之前执行的钩子函数

created()---实例创建完成后执行的钩子函数，通常初始化某些属性值

beforeMount()---将编译完成的html挂载到对应的虚拟dom是触发的钩子函数，相关的render函数首次被调用（此时页面没有内容）

mounted()---编译好的html挂载到页面完成后执行的钩子函数，el被新创建的vm.$el替换（一般做些ajax请求数据进行初始化**在整个实例中只执行一次）

beforeUpdate()---更新之前的钩子函数

updated()---更新之后的钩子函数

beforeDestroy()---实例销毁之前的钩子函数，此时实例仍然完全可用

destroyed()---实例销毁完成的的钩子函数，调用后vue实例所有东西全解除绑定

中文版

1.看中文简介版本需要对照下面给的代码，根据注解和代码去对应

2.首先要知道，绑定渲染的dom不止有el中绑定形式，还有实例对象调用$mount

3.绑定后会接着往下找看有没有template 设置，有和没有会执行两种，也就是说
有template 就只会渲染template中的内容，并且覆盖掉el中的内容

4.但是即使向第三条那样使用template，el会被覆盖，也必须写el，但是可以不用
再里面写操作，原因是声明周期先找el，在根据渲染el 和template在选择

5.template 只能有一个根元素，想多个就给有if 或者show 弄成单个显示

6.beforeCreate、created、beforeMount、mounted 他们四个是创建生命周期一
条龙，后续当我们去改变数据，这些声明周期都不会在执行，除非刷新页面重新
让生命周期继续；

7.而改变值让页面跟着一起变化的是beforeUpdate 、updated他俩在虚拟dom
中，改变就触发，但最好不用，因为有watch 和计算属性都可以做到，所以这个
生命周期中一般不做操作

8.这里要最重要的说明beforeUpdate 、updated第一次刷新页面的生命周期不执
行。只有数据更新虚拟dom监听到才执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
 
</head>
 
<body>
<div id="app">
    <button @click="dom">增加dom</button>
    <p v-for="i,index in list" ref="plist">{{i}}</p>
    <p ref="pHtml">我好</p>
 
    <!--<template id="ss">-->
        <!--template 渲染区域-->
    <!--</template>-->
</div>
 
<script>
 
    // 创建 Vue 实例，得到 ViewModel
    // vm.$mount('#app') 不常用，一般用el
    var vm = new Vue({
        el: '#app',
        // template:'#ss', template 渲染
        data: {
            list: ['as', 'bs', 'cs'],
        },
        methods:{
          dom(){
            this.list.push('ds');
          },
        },
        beforeCreate(){
            debugger;
        },
 
        created(){
            debugger;
 
        },
 
        beforeMount(){
            debugger;
        },
 
        mounted(){
            debugger;
        },
 
 
        beforeUpdate(){
            debugger;
        },
 
        updated(){
            debugger;
 
        },
 
        beforeDestroy(){
            debugger;
 
        },
 
        destroyed(){
            debugger;
        }
 
    });
    
</script>
</body>
 
</html>

丑八怪223

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuejs（一）

一、认识VuejsVue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动二、Vuejs安装方式--3种使用一个框架，我们第一步要做什么呢？安装下载它安装Vue的方式有很多：方式一：直接CDN引入你可以选择引入开发环境版本还是生产环境版本<!-- 开发
复制链接

扫一扫