vue的基本信息

vue的基本信息

vue的生命周期
vue的生命周期图
vue的双向数据绑定原理

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,
在数据变动时发布消息给订阅者,触发相应的监听回调。我们先来看Object.defineProperty()这个方法:
var obj  = {};
Object.defineProperty(obj, 'name', {
        get: function() {
            console.log('我被获取了')
            return val;
        },
        set: function (newVal) {
            console.log('我被设置了')
        }
})
obj.name = 'fei';//在给obj设置name属性的时候,触发了set这个方法
var val = obj.name;//在得到obj的name属性,会触发get方法

template的作用及用法
 template的作用是模板占位符,可帮助我们包裹元素,但在循环过程当中,template不会被渲染到页面上

 <template>
    <div class="root">
        <!--在template上使用for循环-->
        <template v-for="item,index in 5">
            <div>{{index}}---{{item}}</div>
        </template>
    </div>
</template>

vue中keep-alive的作用

在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,
如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果
是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了.


https://www.cnblogs.com/lxlin/p/8472395.html

computed 和 watch 的差异?

(1)computed 是计算一个新的属性,并将该属性挂载到 Vue 实例上,
而 watch 是监听已经存在且已挂载到 Vue 实例上的数据,所以用 watch 
同样可以监听 computed 计算属性的变化。

(2)computed 本质是一个惰性求值的观察者,具有缓存性,只有当依赖
变化后,第一次访问 computed 属性,才会计算新的值。而 watch 则是
当数据发生变化便会调用执行函数。

(3)从使用场景上说,computed 适用一个数据被多个数据影响,而 
watch 适用一个数据影响多个数据。

$route 和 $router 的区别?

$route 是“路由信息对象”,包括 path,params,hash,query,
fullPath,matched,name 等路由信息参数。而 $router 是“路由实例”
对象包括了路由的跳转方法,钩子函数等。

Vue中mixin和mixins的区别

mixin用于全局注册一个混入,如果有公共的组件使用频率很高的话,可以使用
mixin很方便的引入公共的部分mixins选项接受一个混入对象的数组,mixins在引
入组件之后,则是将组件内部的内容如data属性,methods方法与父组件的内容
相对应进行合并,可以对父组件的属性进行扩充,mixins混入的钩子函数会优先
于组件内的钩子函数执行,并且在遇到同名选项的时候也会有选择性的进行合
并。

Vue中mixin和mixins的区别

vue中组件传值的方法

1.父组件向子组件传值  props
2.子组件向父组件传值的方法   事件方式
3.兄弟组件传值的方法   $emit, $on

vue中组件传值的几种常用方法

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据引用和引用提供的信息,可以将Vue基本语法思维导图如下: 1. Vue的基础指令 - 文本插值:使用双大括号{{}}将Vue实例中的数据显示在HTML中。 - 条件渲染:使用v-if和v-else指令根据条件来显示或隐藏元素。 - 循环列表渲染:使用v-for指令循环渲染数组或对象的数据。 2. 路由 - 路由首位:使用Vue Router来进行前端路由管理。 - 路由导航:使用router-link组件进行页面跳转。 - 路由传参:通过路由参数或query参数传递数据。 - 动态路由:根据路由参数的不同来动态加载组件。 3. 生命周期:Vue实例在创建、更新和销毁时触发不同的生命周期钩子函数。 4. Axios语法:使用Axios库进行HTTP请求。 5. 本地存储:使用localStorage或sessionStorage在浏览器中进行数据的本地存储。 根据引用提供的信息,还可以补充一些内容: 6. 计算属性:通过computed属性来计算和返回Vue实例中的响应式数据。 7. Watch监听:通过watch属性来监听Vue实例中数据的变化,并执行相应的操作。 8. class和style:使用v-bind指令绑定class和style属性,实现动态样式的应用。 9. 事件:使用v-on指令绑定事件处理函数,响应用户的交互操作。 10. 表单:使用v-model指令实现表单与数据的双向绑定,包括输入框、多行文本、复选框、单选框和下拉列表等。 请注意,以上只是Vue基本语法的思维导图,具体的语法细节和用法请参考官方文档或相关教程。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue(框架 思维导图).xmind](https://download.csdn.net/download/weixin_46174785/12392736)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue基本使用(含思维导图)](https://blog.csdn.net/weixin_38644397/article/details/117775995)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值