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

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手把手教你学Vue-1(vue指令)相关的知识,希望对你有一定的参考价值。

最近因为要重构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

<div id="vue_det">
   <h1>site : {{site}}</h1>
   <h1>url : {{url}}</h1>
   <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
   var vm = new Vue({
       el: ‘#vue_det‘,
       data: {
           site: "菜鸟教程",
           url: "www.runoob.com",
           alexa: "10000"
       },
       methods: {
           details: function() {
               return  this.site + " - 学的不仅是技术,更是梦想!";
           }
       }
   })
</script>

3.Vue-js 指令

    • 数据data显示 用{{}}

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

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

        <div id="app">
         <div v-html="message"></div>
        </div> 
         <script>
            new Vue({
              el: ‘#app‘,
              data: {
                message: ‘<h1>菜鸟教程</h1>‘
              }
            })
            </script>
      • 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 计算属性

    <div id="app">
     <p>原始字符串: {{ message }}</p>
     <p>计算后反转字符串: {{ reversedMessage }}</p>
    </div>
    
    <script>
    var vm = new Vue({
     el: ‘#app‘,
     data: {
       message: ‘Runoob!‘
     },
     computed: {
       // 计算属性的 getter
       reversedMessage: function () {
         // `this` 指向 vm 实例
         return this.message.split(‘‘).reverse().join(‘‘)
       }
     }
    })
    </script>

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

    5.Vue.js 监听属性

    <div id = "computed_props">
        千米 : <input type = "text" v-model = "kilometers">
        米 : <input type = "text" v-model = "meters">
    </div>
    <p id="info"></p>
    <script type = "text/javascript">
        var vm = new Vue({
        el: ‘#computed_props‘,
        data: {
            kilometers : 0,
            meters:0
        },
        methods: {
        },
        computed :{
        },
        watch : {
            kilometers:function(val) {
                this.kilometers = val;
                this.meters = val * 1000;
            },
            meters : function (val) {
                this.kilometers = val/ 1000;
                this.meters = val;
            }
        }
        });
        // $watch 是一个实例方法
        vm.$watch(‘kilometers‘, function (newValue, oldValue) {
        // 这个回调将在 vm.kilometers 改变后调用
        document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
    })
    </script>

    详细参考

    6.v-on事件

    .stop
    .prevent
    .capture
    .self
    .once
    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
    <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>
    
    <!-- click 事件只能点击一次,2.1.4版本新增 -->
    <a v-on:click.once="doThis"></a>
    

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

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

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

    .lazy
    在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
    
    <!-- 在 "change" 而不是 "input" 事件中更新 -->
    <input v-model.lazy="msg" >
    .number
    如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:
    
    <input v-model.number="age" type="number">
    这通常很有用,因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
    
    .trim
    如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:
    <input v-model.trim="msg">

    入门文档

    以上是关于手把手教你学Vue-1(vue指令)的主要内容,如果未能解决你的问题,请参考以下文章

    手把手教你学Dapr

    手把手教你学SVN

    手把手教你学Dapr - 8. 绑定

    手把手教你学python(从零开始学python)之:模块

    手把手教你在 Vue3 中自定义指令

    手把手教你学Dapr - 2. 必须知道的概念