手把手教你学Vue-1(vue指令)

LucasTwilight 发布于2019-08-22 15:47 / 1604人阅读

摘要：方法用来新增对象的属性模版指令不是字符串模版渲染，所以需要用来渲染菜鸟教程属性中的值应使用指令缩写方式。

最近因为要重构APP项目，在对比了react和Vue，加上前期已经有了react开发的经验，还是想尝试一下VUE，更小更便捷的开发方式。

1.vue 初始化安装官网提供的NPM方法

 $ npm install vue
 # 全局安装 vue-cli
 $ npm install --global vue-cli
 # 创建一个基于 webpack 模板的新项目
 $ vue init webpack my-project
 # 安装依赖，走你
 $ cd my-project
 $ npm run dev

2.初入Vue-demo


   site : {{site}}
   url : {{url}}
   {{details()}}

3.Vue-js 指令

数据data显示用{{}}

当我们给一个比如 props 中，或者 data 中被观测的对象添加一个新的属性的时候，不能直接添加，必须使用 Vue.set 方法。

Vue.set 方法用来新增对象的属性

vue-html 模版指令 vue不是字符串模版渲染，所以需要用vue-html来渲染dom

v-bind HTML 属性中的值应使用 v-bind 指令（缩写方式：tile="XXXX"）。属性v-bind:title="我是title属性"

v-if v-else v-else-if 条件判断语句

v-show 简单语句，有缓存，如果是多次操作，建议用v-show

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

v-on 绑定事件缩写方式 @click:{{functionName()}}

v-for 循环迭代 for-in

v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。

4.Vue.js 计算属性


 原始字符串: {{ message }}
 计算后反转字符串: {{ reversedMessage }}

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
详细请参考

5.Vue.js 监听属性

千米 : 米 :

详细参考

6.v-on事件

.stop
.prevent
.capture
.self
.once









...

...

7 .自定义事件我们可以使用 v-on 绑定自定义事件,

每个 Vue 实例都实现了事件接口(Events interface)，即：
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

8. v-model 双向绑定修饰符

.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：



.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：


这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

入门文档

私有云混合云手把手教你做图像识别手把手教你阿里云服务器搭建商城带你学c带你飞教你用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93753.html

手把手教你学Vue-1(vue指令)

摘要：方法用来新增对象的属性模版指令不是字符串模版渲染，所以需要用来渲染菜鸟教程属性中的值应使用指令缩写方式。最近因为要重构APP项目，在对比了react和Vue，加上前期已经有了react开发的经验，还是想尝试一下VUE，更小更便捷的开发方式。 1.vue 初始化安装官网提供的NPM方法 $ npm install vue # 全局安装 vue-cli $ npm install ...

zzzmh 2019-08-05 13:21 评论0 收藏0
手把手教你学Vue-2(组件开发)

摘要：组件声明组件分为全局的和局部的。父组件通过给子组件下发数据，子组件通过事件给父组件发送消息。以下实例中子组件已经和它外部完全解耦了。 1.vue 组件-声明组件分为全局的和局部的。全局声明 Vue.component(tagName, options) ** 引用组件 // 注册 Vue.comp...

lansheng228 2019-08-30 14:17 评论0 收藏0
手把手教你学Vue-2(组件开发)

摘要：组件声明组件分为全局的和局部的。父组件通过给子组件下发数据，子组件通过事件给父组件发送消息。以下实例中子组件已经和它外部完全解耦了。 1.vue 组件-声明组件分为全局的和局部的。全局声明 Vue.component(tagName, options) ** 引用组件 // 注册 Vue.comp...

Null 2019-08-22 15:49 评论0 收藏0
手把手教你学Vue-2(组件开发)

摘要：组件声明组件分为全局的和局部的。父组件通过给子组件下发数据，子组件通过事件给父组件发送消息。以下实例中子组件已经和它外部完全解耦了。 1.vue 组件-声明组件分为全局的和局部的。全局声明 Vue.component(tagName, options) ** 引用组件 // 注册 Vue.comp...

Raaabbit 2019-08-05 13:23 评论0 收藏0
手把手教你学Vue-3(路由)

摘要：记得要通过配置参数注入路由，从而让整个应用都有路由功能动态路由一个路径参数使用冒号标记。当匹配到一个路由时，参数值会被设置到，可以在每个组件内使用。 1.路由的作用 1.当我们有多个页面的时候，我们需要使用路由，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。简单的路由 const routes = [ { path: ...

SolomonXie 2019-08-02 16:02 评论0 收藏0