Vue 2.5 入门学习记录

- 1. 基础知识
- - Vue 是什么
  - Vue引入方式
  - Vue特点
  - Vue实例中的数据事件方法
  - Vue中的属性绑定和双向绑定
  - Vue中的v-if、v-show、v-for
  - toDoList制作
  - 局部组件&全局组件
- 2. vue-cli工程
- 3. 工程案例实践
- - 使用vue-cli实现todoList及删除某个元素
  - 全局样式与局部样式
- 4. 源码index.html
5. 效果图
- 参考

Vue总是听却一知半解，那就系统学下吧——学习是令人兴奋的，期待它带给我的充实感和成就感。

看完的感受是比较深入浅出的，能让对基础的语法，用法有一个大致的了解，入门课还是挺不错的。

1. 基础知识

Vue 是什么

Vue(发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue引入方式

本地vue.js，script方式引入, cdn方式引入

Vue特点

声明式渲染（声明式标识html与javascript状态的关系）
响应式（Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM）
渐进式框架（Vue 是一个框架，也是一个生态。灵活可以逐步集成，项目可小可大）

挂载点、模板、实例之间的关系（挂载点：一个Dom，Dom下的元素即模板，也可以写在Vue下的Template里作为实例，Vue只处理挂载点之内的元素）

Vue实例中的数据事件方法

插入式表达式：{{msg}} 及模板式表达式：<div v-text=“msg”
v-text会原样输出
v-html会解析html后输出
v-on:click= 同 @click= ;方法写在Vue下methods中
在这里插入图片描述

Vue中的属性绑定和双向绑定

属性绑定：v-bind:title 同 :title ，后边文本是js表达式
双向数据绑定： v-model 改变界面及后端俩个都会修改
在这里插入图片描述

Vue的计算属性和侦听
computed更高效，只有当其中一个值发生变化时才会重新计算，否则用上次的缓存值；
watch监听（监听总和，也是任意一个改变都会监听到）

在这里插入图片描述

Vue中的v-if、v-show、v-for

v-if：不展示会完全销毁dom，在创建
v-show：不展示会设置display:none;
对于一次性的展示v-if效率更高，对于频繁显示销毁的，v-show效率更高一些
v-for 用于循环遍历元素在这里插入图片描述

toDoList制作

在这里插入图片描述

局部组件&全局组件

在这里插入图片描述

2. vue-cli工程

需要配置好环境，先安装node

下载安装node：http://www.nodejs.com.cn/
下载安装node：https://nodejs.org/en/download

node -v
npm -v

运行都不报错了，然后安装vue-cli；

https://v2.cn.vuejs.org/v2/guide/installation.html

3. 工程案例实践

使用vue-cli实现todoList及删除某个元素

全局样式与局部样式

当给组件<style scope的>限定scoped时样式至作用于子组件

4. 源码index.html

<!DOCTYPE html>
<head>
<META Hcharset=UTF-8"/>
<title>Vue 入门</title>
<script src="./vue.js"></script>
</META>
</head>
<TITLE>Vue 入门</TITLE><body>
<!-- <div v-model="root" @click="clickedM">{{msg}}
</div> --><div id="root2">{{messg}}<br/>姓：<input v-model="firstName"/>名：<input v-model="lastName"/><div>{{fullName}}</div><div>{{count}}</div><div v-if="show">hello world</div><button @click="handleDisplay" title="v-if">v-if 单击消失/显示</button><div v-show="show">hello world</div><button @click="handleDisplay" title="v-show">v-show 单击消失/显示</button>
<br/><input v-model="dbel"/><button @click="handleClick" :title="title">确认</button><br/><ul><li v-for="(item,index) of list" :key="index">{{item}}</li></ul>局部组件作为新组件：<ul><todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete"></todo-item><ul/>
</div><script>Vue.component('todo-item',{props: ['content','index'],template: '<li @click="handleDelete">{{content}}</li>',methods:{handleDelete: function(){alert(this.index)this.$emit('delete',this.index)}}})new Vue({el: "#root2",data: {messg: "hello world",firstName:"",lastName:"",count:0,list:[1,2,3],dbel:'',title: '待办事项列表',show: true},computed: {fullName: function(){return this.firstName+' '+this.lastName}},watch: {fullName: function(){this.count++}},methods: {handleClick: function(){this.list.push(this.dbel)this.dbel=''},handleDisplay: function(){this.show = !this.show},handleDelete: function(index){alert('父类: '+index)this.list.splice(index,1)}}});
</script>
</body>