Vue2 入门

平凡シンプル

已于 2024-05-13 10:37:35 修改

阅读量358

点赞数

分类专栏： Web 前端文章标签： Vue2

于 2021-06-21 11:08:57 首次发布

本文链接：https://blog.csdn.net/weixin_45381071/article/details/118079733

版权

Web 前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

常用指令

v-text 改变元素文本,不可解析html标签
v-html 改变元素文本,可解析html标签
v-on 绑定事件例: v-on:click="事件(参数)" 简写: @click="事件(参数)"
v-show 是否显示该元素（实质改变display)
v-if 跟v-show类似不同点在于实质的不同 v-show改变的是display,而v-if 是操作的dom树 ,在dom树上增添或删减
v-bind 改变属性值的指令例: v-bind:src="" 简写: :src=""
v-for 根据数据生成列表结构
v-model 数据的双向绑定

插值表达式,v-text和v-html的区别

v-text和{{}}表达式渲染数据，不解析标签，如果有标签则直接当做字符输出到页面上;v-html不仅可以渲染数据，而且可以解析标签。

v-show和v-if的区别

v-if 在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销比v-show大
v-show控制的时元素的display属性，无论初始条件是否成立，都会渲染标签。而v-if是惰性的，只有在条件成立时才渲染为真实的标签，条件为假，不会去渲染标签

v-bind和v-model的区别

v-bind 产生的效果不含有双向绑定，所以 :value 的效果就是让 input的value属性值等于 data.name 的值，而 v-model 的效果是使input和 data.body 建立双向绑定，因此首先 data.body 的值会给input的value属性，其次，当input中输入的值发生变化的时候，data.body 还会跟着改变。

v-model 其实就是 v-bind 和 v-on 的语法糖

vue组件中的常用属性

name 组件名称
props 父组件传值给子组件（可以是单个值，也可以是一个对象，或者数组等）
data 组件需要的数据定义在这里面
computed 称为计算属性，用来控制该组件自己的变量，该变量不在data里面声明，直接在computed里面定义，然后经过一系列的计算等操作之后，返回。所以，computed比较适合对多个变量或者对象进行处理后返回一个结果的值。如果data中的数据不改变的话，直接从缓存中获取结果；否则重新执行
methods 里面包含了许多的方法,例如：点击某个按钮执行相应的方法，每次都得重新执行
watch：vue提供的一种来监听实例上数据变动的属性——监听属性watch。我们常用的是handler回调，每次都得重新执行。当需要的数据在异步变化或者开销较大时，在执行更新的时候，使用watch会更好一些

子组件中data和props的区别

子组件中的data数据，不是通过父组件传递的是子组件私有的，是可读可写的。

子组件中的所有 props中的数据，都是通过父组件传递给子组件的，是只读的。

watch,data和computed的区别

data属性的值，不会随赋值变量的改动而改动。如果要改变这个属性的值，则需要直接给data属性赋值，视图上对这个属性的显示才会变。
computed属性，属于持续变化跟踪。在computed属性定义的时候，这个computed属性就与给它赋值的变量绑定了。改变这个赋值变量，computed属性值会随之改变。
当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为computed。
如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

vue路由传参

通过params的方式，路径不会显示传递的参数

例:

this.$router.push({
          name: 's'//接收参数的组件,
          params: {
            id: id,
            name:name
          }
        })

//在接收参数的组件中
	this.$route.params.id
//对应的路由配置
{
     path: '/s/:id/:name',
     name: 's',
     component: s
   }

通过query的方式,显示传递的参数

例:

this.$router.push({
          path: '/ss',//跳转的路由
          query: {
            id: id
          }
        })
//在接收参数的组件中
this.$route.query.id
//对应的路由配置
{
     path: '/ss',
     name: 'ss',
     component: ss
   }