vue

1、介绍

vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，vue被设计为可以自底向上逐层应用。Vue的和学科只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

前端框架三巨头：Vue.js、React.js、AngularJS，前者以轻量易用著称，前两者发展速度最快，后者还是老大。

2、Node和NPM

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括jquery、AngularJS、VueJs都有。

推荐LTS

安装后，查看版本信息：

node -v

node自带npm，查看版本

npm -v

设置镜像管理工具：nrm

安装（-g代表全局安装）

npm install nrm -g

查看镜像仓库列表

nrm ls

指定要使用的镜像源

nrm use taobao

测试速度

nrm test npm

cnpm有时有bug，不推荐。
安装完成重启电脑

3、入门

Empty Project：demo-vue

New Module：Static Web>Static Web ：hello-vue

4、安装vue

4.1、下载安装

4.2、使用cdn

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

4.3、npm安装（推荐）

在hello-vue路径下,进行初始化

npm init -y

安装

npm install vue --save

会生成一个node_modules目录

5、案例

在hello-vue目录新建一个HTML

<body>
    <divid="app">
		<h2>{{name}}，非常帅！！！</h2>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    // 创建vue实例
    var app=newVue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data:{ // 渲染页面需要的数据
            name: "峰哥"
        }
    });
</script>

6、指令

声明式渲染:

{{name}}

属性

在将v-bind用于class和style时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
<!--可以是数据模型，可以是具有返回值的js代码块或者函数-->
<div v-bind:title="title" style="border: 1px solid red; width: 50px; height: 50px;"></div>
<!--class样式-->
<div v-bind:class="activeClass"></div>

双向绑定：

<input type="text" v-model="num"/>

支持元素：input、select、textarea、checkbox、radio、components(vue自定义组件)

事件处理

<button v-on:click="num++">点击</button>
<button v-on:click="add">点击</button>
v-on:事件名="js片段或函数名"

输出

v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出

v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

循环

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

1个参数时，得到的是对象的属性
2个参数时，第一个是属性，第二个是键
3个参数时，第三个是索引，从0开始

显示

v-if、v-else和v-show

7、Vue实例

实例

模板或元素

数据

方法

8、生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

created：在创建实例之后进行调用。

beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}

mounted：我们可以将他理解为原生js中的window.onload=function({.,.}),或许大家也在用jquery，所以也可以理解为jquery中的$(document).ready(function(){….})，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。此时页面中的{{name}}已被渲染成峰哥

beforeDestroy：该函数将在销毁实例前进行调用。

destroyed：改函数将在销毁实例时进行调用。

beforeUpdate：组件更新之前。

updated：组件更新之后。

this

9、指令

什么是指令？

指令 (Directives) 是带有v-前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

例如我们在入门案例中的v-on，代表绑定事件

插值闪烁：使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。

事件修饰符

.stop：阻止事件冒泡到父元素
.prevent：阻止默认事件发生
.capture：使用事件捕获模式
.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once：只执行一次

按键修饰符

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">

.enter
.tab
.delete（包括delete和backspace)
.esc
.space
.up
.down
.left
.right

组合按钮

.ctrl
.alt
.shift

<!--Alt+C-->
<input @keyup.alt.67="clear">
<!--Ctrl+Click-->
<div @click.ctrl="doSomething">Do something</div>

key

当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

这个功能可以有效的提高渲染的效率。

但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key属性。理想的key值是每项都有的且唯一的 id。

<li v-for="(item,index) in items" :key=index></li>

10、组件

10.1、全局组件

Vue.component("counter",{
    template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
    data(){
        return{
            count:0
        }
    }
})
var app = new Vue({
    el:"#app"
})

为了复用，需要定义成data()方法

10、2、局部组件

const counter = {
    template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
    data(){
        return{
            count:0
        }
    }
}
var app = new Vue({
    el:"#app",
    components:{
        counter:counter
    }
})

10.3、组件通信

props：父向子传递

父组件使用子组件时，自定义属性（属性名任意，属性值为要传递的数据）
子组件通过props接收父组件属性

<div id="app">
    <h1>打个招呼：</h1>
    <introduce title="大家好，我是..."></introduce>
</div>
<script>
    Vue.component("introduce",{
        //直接使用props接收到的属性来渲染页面
        template:'<h1>{{title}}</h1>',
        props:['title']
    })
    var app=new Vue({
        el:'#app'
    })
</script>

<myList :items="lessons"></myList>

const myList={
    template:'<ul><li v-for="item in items" :key="item.id">abc</li></ul>',
    props:{
        items:{
            type:Array,
            default:[],
            required:true
        }
    }
};
var app = new Vue({
    el:'#app',
    components:{
        myList
    },
    data:{
        lessons:[
            {id:1,name:'java'},
            {id:2,name:'html5'}
        ]
    }
});

type：String、Number、Boolean、Array、Object、Date、Funcation\Symbol

子向父通信：

<h2>num: {{num}}</h2>
<!--使用子组件的时候，传递num到子组件中-->
<counter :count="num" @inc="increment" @dec="decrement"></counter>
    
Vue.component("counter", {
    // 子组件，定义了两个按钮，点击数字num会加或减
    template:'<div><button @click="plus">加</button><button @click="reduce">减</button></div>',
    props:['count'],
    methods:{
        plus(){this.$emit("inc")},
        reduce(){this.$emit("dec")}
    }
    // count是从父组件获取的。
})
var app = new Vue({
    el:"#app",
    data:{
        num:0
    },
    methods:{
        // 父组件中定义操作num的方法
        increment(){
            this.num++;
        },
        decrement(){
            this.num--;
        }
    }
})

通过v-on指令将父组件的函数绑定到子组件上

vue提供了一个内置的this.$emit()函数，用来调用父组件绑定的函数

路由vue-router

posted @ 2023-04-20 09:31 挖洞404 阅读(5) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

wd404

vue

6、指令

this

路由vue-router