文章目录

一、项目结构
- 1. 结构总览
- 2. App.vue
- 3. main.js
二、vue中的几个重要的生命周期钩子
三、vue中几个重要的选项
- 1.data
- 2.computed
- 3.watch
- 4.methods
- 5.prop
四、Vue的一些指令
- 1.v-bind
- 2.v-model
- 3.v-show
- 4.v-if
- 5.v-for
- 6.sync和emit

一、项目结构

1. 结构总览

使用vue-cli创建的项目，主要需要注意学习的是框标注部分

2. App.vue

说明
这个是根组件，具有一般组件的基本结构，同时在编译结束的时候会把根组件渲染到#app，这里的#app其实是指的index.html里面的#app。
编译过程
app.vue->main.js->index.html
编译app.vue->编译完进行代码替换->替换index.html里面的#app

3. main.js

main.js作为项目入口，引入vue模块、APP组件，创建Vue对象，并将APP组件传入，把APP组件编译好以后渲染到#app中

二、vue中的几个重要的生命周期钩子

created
用来在一个实例被创建之后执行代码
ounted
实例被挂载后调用，但是不保证所有的子组件也都会挂载完成
destroyed
实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
更多
https://cn.vuejs.org/v2/guide/instance.html#实例生命周期钩子

三、vue中几个重要的选项

1.data

这里可以放一些绑定在对应vue文件上的变量，这些变量可以直接用在template标签里
data传入的必须是一个函数(返回一个对象)，每个实例可以维护自己独立的对象拷贝

2.computed

说明
- 计算属性是 基于它们的响应式依赖 进行缓存的
- 只在相关响应式依赖发生改变时它们才会重新求值
代码示例
- 例如，因为Date.now()不是响应式依赖，所以now不会重新求值，而是一直为缓存的值。
```
    computed: {now: function () {return Date.now()}}
```
- 如果不希望因为缓存产生一些不更新的问题，每次都要对某一属性进行重新求值，可以在data返回的对象中定义属性，然后用方法去每次计算求值，然后更新属性。

3.watch

说明
- Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动。
  当有一些数据需要随着其它数据变动而变动时，很容易滥用 watch。然而，通常更好的做法是 使用计算属性而不是命令式的 watch 回调 。
- 也可以用vm.$watch( expOrFn, callback, [options] )方法对某个值或对象进行监控，这个方法的返回值是unwatch()方法[取消监听]
参数
- 属性deep
  当watch的数据是对象时，由于对象地址是不变的，所以仅仅改变对象的某些属性是检测不出来的，使用deep:true属性可以检测出属性的变化，当然这种开销也会比较大。
- 属性immediate
  在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调，执行回调函数。

代码示例

    watch:{syncmsg:{//监听syncmsg，设置了immediate属性handler(newval,oldval){console.log("newval",newval)console.log("oldval",oldval)},deep:true,immediate:true}},

效果
依次点击更新父组件、修改子组件内容按钮(这里知识点见6(6).sync和emit)

4.methods

一般函数的定义都写在这个模块内

5.prop

可以通过该选项设置传值接口，在使用组件时对prop中设置的属性使用v-bind进行数据的绑定传值

四、Vue的一些指令

1.v-bind

说明
缩写‘:’，可以用来动态绑定组件的attribute，绑定的值可以是对象或数组，也可以用于传递prop，传递的prop必须是在子组件内部props中声明的。
用法
- (1)传递prop
  - 代码
```
    <template><div class="demo-bind-box">{{bindmsg}}</div></template><script>export default {props:['bindmsg'],data(){return{//bindmsg:'hello'}}}</script>
```
```
    <bindBox :bindmsg="mybindmsg"></bindBox>
```
  - 效果
- (2)绑定attribute
  - 在上面的基础上对style属性进行绑定，绑定了文字的颜色和大小
```
    <bindBox :bindmsg="mybindmsg" :style="'color:red;font-size:36px;'"></bindBox>
```
  - 也可以绑定的值是一个对象(蓝色是绑定的值是对象的效果)
```
    <bindBox :bindmsg="mybindmsg" :style="{color:'blue','font-size':'36px'}"></bindBox>
```
- (3)v-bind修饰符.prop
  - (3.1)v-bind 默认绑定到 DOM 节点的 attribute 上，使用 .prop 修饰符后，会绑定到 property，这里要明确HTML attribute和DOM property的区别：
    - attribute 是 dom 元素在文档中作为 html 标签拥有的属性；
    - property 是 dom 元素在 js 中作为对象拥有的属性。
  - (3.2)直接把div标签当作对象，用“.”输出即是property属性，“.”是不能输出自定义绑定的属性的。
```
    <bindBox id="mybindbox" :bindmsg="mybindmsg" :bindprop.prop="mybindmsg" :bindattr="mybindmsg" :style="'color:red;font-size:36px;'"></bindBox>
```
  - (3.3)使用.prop修饰符绑定属性property-bindprop
  - (3.4)直接使用v-bind是将属性绑定到attribute-bindattr
```
    let box=document.getElementById('mybindbox').attributesconsole.log("box:",box)
```
  - 注
    如果要输出两个绑定的属性，前者(绑定到attribute)需要调用 getAttribute(“bindmsg”) 方法，后者(绑定到 property)可以 直接使用".bindprop" 获取

2.v-model

文档
https://cn.vuejs.org/v2/guide/forms.html#在组件上使用-v-model
说明
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

示例

代码

    <input v-model="message" placeholder="edit me"><p>输入框内容为: {{ message }}</p>

效果

修饰符
- .lazy(在输入内容修改后才更新值，表现为回车或者焦点不在框内)
- .number(限制输入框内只能输入数字)
- .trim(自动过滤掉输入内容的前后空格)

3.v-show

说明
当v-show="true"中的value为true的时候，才会显示对应元素，当value为false的时候，前端还是会渲染加载出来，只不过不显示，就是简单地CSS切换

示例

代码

    <input v-model="message" placeholder="edit me"><p v-show="message=='true'">输入框内容为: {{ message }}</p>

v-show=“false”
v-show=“true”

只有当输入的值为true的时候才会出现文本

4.v-if

说明
当v-show换成v-if后，同样是传入boolean值，区别就是当传入的value为false时，这部分直接注释掉，不会加载到页面中，只有在value为true的时候才会加载到页面。

示例

v-if=“false”
v-show=“true”

搭配使用v-else

代码

    <input v-model="message" placeholder="edit me"><p v-if="message=='true'">输入框内容为: {{ message }}</p><p v-else style="color:red">输入框内容为: {{ message }}</p>

效果

5.v-for

说明
在data中定义列表，使用v-for指令进行遍历

示例

定义

    fruits:[{name:'apple',price:10},{name:'orange',price:11},{name:'peach',price:12}]

遍历

    <div v-for="item in fruits"><div>{{item.name+":"+item.price}}</div></div>

效果

6.sync和emit

说明
可以用于子组件更新父组件绑定的内容

子组件<bindBox>

子组件定义

    <template><div class="demo-bind-box" :bindattr="mybindattr" >{{bindmsg}}<br>子组件:{{emitmsg}}<br><button @click="emitMsg">更新父组件syncmsg内容</button><br></div></template>

子组件对应的js内容

    <script>export default {props:['emitmsg'],data(){return{bindmsg:'hello',mybindattr:'attr',}},methods:{emitMsg(){this.$emit('update:emitmsg','更新父组件内容')}}}</script>

操作
- ①初始时：外部组件调用<bindBox>，使用 .sync修饰符，向子组件同步数据，初始化emitmsg为syncmsg(‘初始时父组件传递给子组件的内容’)
```
    <bindBox :emitmsg.sync="syncmsg"></bindBox><div>父组件:{{syncmsg}}</div><button @click="changeChildMsg">父组件修改子组件内容</button>
```
  - 效果
- ②子组件更新父组件：点击更新父组件，调用emit方法动态更新emitmsg
```
   emitMsg(){this.$emit('update:emitmsg','更新父组件内容')}
```
  - 效果
- ③父组件更新子组件：点击修改子组件内容，该按钮直接修改syncmsg，子组件中的emitsmg是同步更新的
```
    <button @click="changeChildMsg">父组件修改子组件内容</button>
```
```
    changeChildMsg(){this.syncmsg="父组件又更新了子组件的内容"},
```
  - 效果

2.学习Vue入门知识点相关推荐

Python学习-爬虫入门知识点整理
1 通讯协议 1.1 端口进行数据通讯的步骤: (1)找到对方IP (2)数据要发送到对方指定的应用程序上.为了标识这些应用程序,所以给这些网络应用程序都用数字进行了标识,这个数字就叫端口,这里的端 ...
vue中集合取第一个_快速学习Vue框架（知识点集合）
学习Vue的小伙伴速度看过来,快速学习Vue框架知识点集合贴来啦.建议收藏,尤其基础并不是很扎实的同学,本篇集合贴就是你日后工作的参考手册. 基础知识: ·vue的生命周期:beforeCreate/ ...
Vue学习（入门实例、常用指令）-学习笔记
文章目录 Vue学习(入门实例.常用指令)-学习笔记实例常用指令 v-on v-bind v-for v-html v-if event v-model 双向数据绑定实现 - defineProp ...
vue源码学习--vue源码学习入门
本文为开始学习vue源码的思路整理.在拿到vue项目源码的之后看到那些项目中的文件夹,会很困惑,不知道每个文件夹内的世界,怎么变换,怎样的魔力,最后产生了vue框架.学习源码也无从学起.我解决了这些困 ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
Day7：Vue入门学习——传智播客学习笔记【微服务电商】
本节依旧是前端内容,但还是了解一下基础的入门知识学习目标会创建Vue实例,知道Vue的常见属性会使用Vue的生命周期的钩子函数会使用vue常见指令会使用vue计算属性和watch监控会编写 ...
Vue入门学习（上）
本篇用作记录自己初次学习Vue的一个过程,尝试用自己的方式总结Vue的常用的用法,此次也是在自己通读了Vue的文档以后,做出的一些总结,对于vue-router,以及vuex不会涉及,当然会提到一些初 ...
学习Vue的一些看法
对于vuejs的学习我大概分三个层次: 第一层:了解概念,理解原理,不求甚解即可. 大到nodejs/webpack,搞清楚作用,运作流程:小到vuex/vue-router作用,预期目标.搞清楚这些 ...

2.学习Vue入门知识点

文章目录

一、项目结构

1. 结构总览

2. App.vue

3. main.js

二、vue中的几个重要的生命周期钩子

三、vue中几个重要的选项

1.data

2.computed

3.watch

4.methods

5.prop

四、Vue的一些指令

1.v-bind

2.v-model

3.v-show

4.v-if

5.v-for

6.sync和emit

2.学习Vue入门知识点相关推荐

最新文章

热门文章