Vue.js的基本使用 学习笔记

其他 2018-06-13 05:17:36 阅读次数: 0

VUE的基本使用 学习笔记

一、 简介

  1. Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
  2. Vue 只关注视图层， 采用自底向上增量开发的设计。
  3. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
  4. Vue 学习起来非常简单，本教程基于 Vue 2.9.3 版本测试。

二、 安装

三 、 创建项目

  1. 创建一个基于webpack模板的项目

    vue init webpack myVue
之后需要进行一些配置  ， 默认情况下直接回车即可

  2. 测试运行

    npm run dev 
在浏览器中访问 localhost:8080

  3. vue 目录结构
      2. 2.
目录\文件 说明
build 项目构建(webpack)相关代码
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm加载的项目依赖模块
src 这是我们要开发的目录 ，基本上要做的事情都在这个目录里面 ， 里面包含了几个目录及文件 ： 1. assets ： 放置一些图片 如logo等 2. components : 里面放了一些组件文件 ， 可以不用 3. App.vue : 项目的入口文件 ， 我们可以将组件直接写在这里 。 4. main.js : 项目的核心文件
static 静态资源文件 ， 如图片 、 字体等
test 初始测试目录 ， 可以删除
.xxx 文件 这是一些配置文件
index.html 首页入口文件 ， 你可以添加一些mate信息或统计代码啥的
package.json 项目配置文件
README.md 项目的说明文档 markdown 格式

4. vue文件结构 （以App.vue为例）

    <!-- 展示模板 -->
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <hello></hello>
      </div>
    </template>
     <!--js代码-->
    <script>
    // 导入组件
    import Hello from './components/Hello'

    export default {
      name: 'app',
      components: {
        Hello
      }
    }
    </script>
    <!-- 样式代码 -->
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
1. 尝试修改vue文件中的内容 ， 发现一般情况下 ， 修改vue文件之后 ， 浏览器中的界面会自动刷新

四 、 安装vue 调试神器

  1. vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。

  2. 安装 ：

    1. 从chrom 商店下载 ， 后直接安装 ，非常的简单

    2. 从git 上获取资源后安装：

      1. 从git上获取资源

        git地址： https://github.com/vuejs/vue-devtools

      2. 解压后 cmd进入到解压目录 安装所需的依赖模块

         npm install // 如果觉得速度太慢  可以将npm 升级成为 cnpm   执行cnpm install

      3. 编译项目文件 

        npm run build
      4. 添加到Chrome的扩展程序中：
    3. 测试安装效果 ：
      1. 在浏览器中访问vue编写的页面 ， 打开F12会看到有vue一栏

五、 模板语法

  1. Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
  2. Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统
  3. 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

  4. 数据绑定：

    1. 文本：

      1. 数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

        <div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  }
})
</script>

    2. html :

      1. 使用 v-html 指令用于输出 html 代码：

        <div id="app">
    <div v-html="message"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1> hello world</h1>'
  }
})
</script>

    3. 属性：

      1. HTML 属性中的值应使用 v-bind 指令。

      2. 以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

        <div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
  <br><br>
  <div v-bind:class="{'class1': class1}">
    directiva v-bind:class
  </div>
</div>

<script>
new Vue({
    el: '#app',
  data:{
      class1: false
  }
});
</script>

    4. 表达式：

      1. Vue.js 都提供了完全的 JavaScript 表达式支持。

        {{5+5}}
        {{ ok ? ‘YES’ : ‘NO’ }}
        {{ message.split(”).reverse().join(”) }}
        hello world
        new Vue({ el: '#app', data: { ok: true, message: 'RUNOOB', id : 1 } })

    5. 指令 ：

      1. 指令是带有v- 前缀的特殊属性 。

      2. 指令用于在表达式值改变时 ， 将某些行为应用到DOM上 。 

        <div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

    6. 参数 ：

      1. 参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

        <div id="app">
    <pre><a v-bind:href="url">hello world</a></pre>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

      2. 另一个例子是 v-on 指令，它用于监听 DOM 事件：

        <a v-on:click="doSomething">

    7. 修饰符 ：

      1. 修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

        <form v-on:submit.prevent="onSubmit"></form>

  5. 用户输入：

    1. 在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定: 

      <div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

    2. 按钮的事件我们可以使用v-on 监听事件 ， 并对用户的输入做出响应

      1. 以下实例在用户点击按钮后对字符串进行翻转操作：

        {{ message }}

        反转字符串
        new Vue({ el: '#app', data: { message: 'Runoob!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })

  6. 过滤器 ：

    1. vue.js 允许你定义自己的过滤器 ， 被用作一些不常用的文格式化操作 。 由”管道符”指示 ， 格式如下：

      <div id="app">
  {{ message | capitalize }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

    2. 过滤器可以串联 ： 

      {{ message | filterA | filterB }}

    3. 过滤器也是javaScript函数 ， 因此可以接收参数：

      {{ message | filterA('arg1', arg2) }}
这里message 作为过滤器的第一个参数 ， 字符串‘arg1’将传给过滤器作为第二个参数 ， arg2 表达式的值将被求值然后传给过滤器作为第三个参数 。

  7. 缩写 ：

    1. v-bind缩写：

      <!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

    2. v-on 缩写 ： 

      <!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

六 、 vue.js 条件与循环

  1. 条件判断 ：

    1. v-if : 用于条件判断 

      <div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>hello world</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

    2. v-else : 可以用 v-else 指令给 v-if 添加一个 “else” 块：

      <div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>

<script>
new Vue({
  el: '#app'
})
</script>

    3. v-else-if : v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

      <div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

    4. v-show ： 我们也可以使用 v-show 指令来根据条件展示元素：

      <h1 v-show="ok">Hello!</h1>

  2. 循环语句：

    1. v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

    2. v-for 可以绑定数据到数组来渲染一个列表：

      <div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

    3. v-for 迭代对象 ：

      <div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

迭代对象时默认迭代的是对象数据中的value ， 想使用key的话 ， 可以指定第二个参数 ：     
<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

如果想要使用索引 ， 可以指定第三个参数 ：
<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

    4. v-for 迭代整数

      <div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

七、 vue计算属性

  1. 计算属性关键词: computed。

  2. 计算属性在处理一些复杂逻辑时是很有用的。

    <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>
提供的函数将用作属性 vm.reversedMessage 的 getter 。
  3. computed VS methods
    1. 我们可以使用methods来代替computed ， 效果是一样的 ， 但是computed是基于他的依赖缓存 ， 只有相关依赖发生改变时才会重新取值 ， 而是用methods ， 在重新渲染的时候 ， 函数总是会被重新调用执行 。
    2. 可以说是 computed性能更好 ， 但是如果你不希望使用缓存 ，你可以使用methods 。

  4. computed setter

    1. computed属性在默认只有gettter ， 不过在需要时你也可以提供一个setter ： 

      var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

从实例运行结果看在运行 vm.site = '菜鸟教程 http://www.runoob.com'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。

八、 监听属性

  1. 我们可以通过watch来响应数据的变化 。 

    <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;
        }
    }
    });
</script>

九、 样式绑定

  1. vue.js class
    1. class 与style 是html 元素的属性 ， 用于设计元素的样式 ， 我们可以用v-bind来设置样式属性 。

  2. class 属性绑定

    1. 我们可以为v-bind：class 设置一个对象 ， 从而动态的切换class ： 

      <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="{ active: isActive }"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

    2. 我们也可以直接绑定数据里的一个对象：

      <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})
</script>
</body>

  3. 数组语法：

    1. 我们可以把一个数组传给 v-bind:class ，实例如下：

      <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
</head>
<body>
<div id="app">
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

十、 vue.js style (内联样式)

  1. 我们可以在 v-bind:style 直接设置样式：

    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
    fontSize: 30
  }
})
</script>

  2. 绑定一个样式对象

    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <div v-bind:style="styleObject">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'green',
      fontSize: '30px'
    }
  }
})
</script>

十一 、 事件处理器

  1. v-on 事件监听 ：

    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>
</body>

    1. 可以接收一个定义的方法来调用

      <div id="app">
   <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
          alert(event.target.tagName)
      }
    }
  }
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>

  2. 事件修饰符 ：

    1. Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节

      <!-- 阻止单击事件冒泡 -->
<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>

  3. 按键修饰符 ：

    1. Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

      <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

    2. 记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

      <!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

    3. 全部的按键别名： 

          .enter
    .tab
    .delete (捕获 "删除" 和 "退格" 键)
    .esc
    .space
    .up
    .down
    .left
    .right
    .ctrl
    .alt
    .shift
    .meta

    <p><!-- Alt + C -->
    <input @keyup.alt.67="clear">
    <!-- Ctrl + Click -->
    <div @click.ctrl="doSomething">Do something</div>

十二、 表单

  1. 可以用 v-model 指令在表单控件元素上创建双向数据绑定
  3. v-model 会根据控件类型自动选取正确的方法来更新元素。

  4. 输入框：

    1. 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：

      <div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>

  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob',
    message2: '菜鸟教程\r\nhttp://www.runoob.com'
  }
})
</script>

  5. 复选框：

    1. 复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：

      <div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>

  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    checked : false,
    checkedNames: []
  }
})
</script>

  6. select 列表：

    1. 以下实例中演示了下拉列表的双向数据绑定：

      <div id="app">
  <select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>

  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    selected: '' 
  }
})
</script>

  7. 修饰符：

    1. .lazy

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

        <!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

    2. .number

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

        <input v-model.number="age" type="number">
      2. 这通常很有用，因为在 type=”number” 时 HTML 中输入的值也总是会返回字符串类型。

    3. .trim

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

        <input v-model.trim="msg">

十二、 组件

  1. 组件 components是vue最强大的功能之一。
  2. 组件可以扩展HTML元素 ， 封装可重用的代码
  3. 组件系统让我们可以使用可服用的小组件来构建大型应用 ， 几乎任意类型的应用的界面都可以抽象为一个组件树 。

  4. 注册一个全局组件的语法格式如下 ： 

    Vue.component(tagName, options)
tagName 为组件名 ， options为配置选项 ， 我们可以用一下方式来调用组件 ：
<tagName></tagName>

  5. 全局组件：

    1. 所有的实例都可以用全局组件 。

    2. 注册一个全局组件并使用

      <div id="app">
    <runoob></runoob>
</div>

<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

  6. 局部组件 :

    1. 我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

      <div id="app">
    <runoob></runoob>
</div>

<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}

// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})
</script>

  7. Prop

    1. prop 是父组件用来传递数据的一个自定义属性。

    2. 父组件的数据需要通过props把数据传给子组件 ， 子组件需要显示的用props选项声明“prop”

      <div id="app">
    <child message="hello!"></child>
</div>

<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

  8. 动态Prop

    1. 类似于用v-bind绑定HTML特性到一个表达式 ， 可以使用v-bind动态绑定props的值到父组件的数据中 ， 每当父组件的数据变化时 ， 改变化也会传到给子组件 。

      <div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>

<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'
  }
})
</script>

    2. 以下实例中将 v-bind 指令将 todo 传到每一个重复的组件中：

      <div id="app">
    <ol>
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
      </ol>
</div>

<script>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
new Vue({
  el: '#app',
  data: {
    sites: [
      { text: 'Runoob' },
      { text: 'Google' },
      { text: 'Taobao' }
    ]
  }
})
</script>

  9. prop验证

    1. 组件可以为prop指定验证要求

    2. prop是一个对象而不是一个字符串数组时 ， 它包含验证要求：

      Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组／对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})
    3. type可以使下面的原生构造器 ：
      1. String
      2. Number
      3. Boolean
      4. Function
      5. Object
      6. Array
    4. type也可以使一个自定义构造器 ， 使用instanceof检测

  10. 自定义事件

    1. 父组件是使用props传递数据给子组件 ， 但如果子组件要把数据传递回去 ， 就需要使用自定义事件 。

    2. 我们可以使用v-on 绑定自定义事件 ， 每个vue实例都实现了事件接口（Events interface）， 即：

      1. 使用$on(eventName)监听事件

      2. 使用$emit（eventName）触发事件

        <div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>

<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</script>

      3. 如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如：

        <my-component v-on:click.native="doTheThing"></my-component>

      4. 父组件给子组件传值的时候，如果想传入一个变量，写法如下：

        // 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data:{
    message:"hello",
  }
})

十三 、 自定义指令

  1. 除了默认设置的核心指令（如： v-mldel v-show） , Vue也允许注册自定义指令 。

  2. 下面我们注册一个全局指令v-focus , 该指令的功能是在页面加载时 ， 元素获得焦点： 

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>

<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>
</body>
</html>

  3. 我们也可以在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>页面载入时，input 元素自动获取焦点：</p>
  <input v-focus>
</div>

<script>
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>
</body>
</html>

  4. 钩子

    1. 钩子函数
      1. 指令定义函数提供了几个钩子函数（可选）：
        1. bind : 只调用一次 ， 指令第一次绑定到元素时调用 ， 用这个钩子函数可以定义一个绑定时执行一次的初始化操作 。
        2. inserted ： 被绑定元素插入父节点时调用（父节点存在即可调用 ， 不必存在于document 中） 。
        3. update ： 被绑定的元素所在的模板更新时调用 ， 而无论绑定值是否变化 。 通过比较更新前后的绑定值 ， 可以忽略不必要的模板更新
        4. componentUpdated : 被绑定的元素在模板完成一次更新时调用。
        5. unbind ： 只调用一次 ， 指令与元素解绑时调用 。

    2. 钩子函数参数

      1. 钩子函数参数有 ：

        1. el : 指令所绑定的元素 ， 可以用来直接操作dom
        2. binding ： 一个对象 ， 可以包含以下属性 ：
          1. name : 指令名 ， 不包括v- 后缀
          2. value ： 指令绑定的值
          3. oldValue ： 指令绑定的前一个值， ， 仅在update 和componentUpdate钩子中使用 。 无论值是否改变都可以 使用 。
          4. expression ： 绑定值的字符串形式 。
          5. arg ： 传给指令的参数
          6. modifiers ： 一个包含修饰符的对象
        3. vnode : vue编译生成的虚拟节点 。
        4. oldVnode ： 上一个虚拟节点 ， 仅在update 和 componentUpdated 钩子中使用 。

        5. 有时候我们不需要其他钩子函数，我们可以简写函数，如下格式：

          Vue.directive('runoob', function (el, binding) {
  // 设置指令的背景颜色
  el.style.backgroundColor = binding.value.color
})

        6. 指令函数可接受所有合法的 JavaScript 表达式，以下实例传入了 JavaScript 对象：

          <div id="app">
    <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
</div>

<script>
Vue.directive('runoob', function (el, binding) {
    // 简写方式设置文本及背景颜色
    el.innerHTML = binding.value.text
    el.style.backgroundColor = binding.value.color
})
new Vue({
  el: '#app'
})
</script>

十四 、 路由

  1. 路由允许我们通过不同的url 访问不同的内容
  2. 通过vue.js 可以实现多视图的单页面web应用
  3. 路由需要载入vue-router 库

  4. 安装路由依赖：

    npm 安装
npm install vue-router
也可以使用CDN 的模式 引入  vue-router 依赖
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

  5. 简单实例：

    1. vue.js + vue-router 可以很简单的实现单页应用。

    2. 一下实例中 我们将vue-router 加进来 ， 然后配置组件和路由映射 ， 再告诉vuo-router 在哪里渲染他们 ， 代码如下所示

      <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
    </head>
    <body>
    <div id="app">
      <h1>Hello App!</h1>
      <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>

    <script>
    // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
      routes // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')

    // 现在，应用已经启动了！
    </script>
    </body>
    </html>

猜你喜欢

转载自blog.csdn.net/chou_out_man/article/details/80333471
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022