1. 实例入门 - 实例属性
一, vue 和 Jquery.js 一起使用
下载可以去官网进行下载, 我这里使用的版本是 3.1.1, 下载好后在需要的页面引入就可以了. 当然你还有很多其它的方法引入 jquery, 只要可以顺利引入就可以了.
- <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <script type="text/javascript" src="../assets/js/vue.js"></script>
- <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>
- <title>Early Examples Demo</title>
- </head>
- <body>
- <h1>Early Examples Demo</h1>
- <hr>
- <div id="app">
- {{message}}
- </div>
- <script type="text/javascript">
- var app=new Vue({
- el:'#app',
- data:{
- message:'hello Vue!'
- },
- // 在 Vue 中使用 jQuery
- mounted:function(){
- $('#app').html('我是 jQuery!');
- }
- })
- </script>
- </body>
- </html>
二, 实例调用自定义方法
在 Vue 的构造器里写一个 add 方法, 然后我们用实例的方法调用它
构造器里的 add 方法
- methods:{
- add:function(){
- console.log("调用了 add 方法")
- }
- }
实例调用:
app.add();
2. 实例方法
一,$mount 方法
$mount 方法是用来挂载我们的扩展的.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <script type="text/javascript" src="../assets/js/vue.js"></script>
- <title>Examples Method Demo</title>
- </head>
- <body>
- <h1>Examples Method Demo</h1>
- <hr>
- <div id="app">
- {{message}}
- </div>
- <script type="text/javascript">
- var zidingyi = Vue.extend({
- template:`<p>{{message}}</p>`,
- data:function(){
- return {
- message:'Hello ,I am JSPang'
- }
- }
- })
- var vm = new zidingyi().$mount("#app")
- </script>
- </body>
- </html>
二,$destroy() 卸载方法
用 $destroy() 进行卸载
- html:
- <p><button onclick="destroy()"> 卸载 </button></p>
javascript 代码
- function destroy(){
- vm.$destroy();
- }
三,$forceUpdate() 更新方法
vm.$forceUpdate()
四,$nextTick() 数据修改方法
当 Vue 构造器里的 data 值被修改完成后会调用这个方, 也相当于一个钩子函数吧, 和构造器里的 updated 生命周期很像.
- function tick(){
- vm.message="update message info";
- vm.$nextTick(function(){
- console.log('message 更新完后我被调用了');
- })
- }
3. 实例事件
实例事件就是在构造器外部写一个调用构造器内部的方法. 这样写的好处是可以通过这种写法在构造器外部调用构造器内部的数据.
写一个点击按钮, 持续加 1 的例子.
一,$on 在构造器外部添加事件.
- app.$on('reduce',function(){
- console.log('执行了 reduce()');
- this.num--;
- });
$on 接收两个参数, 第一个参数是调用时的事件名称, 第二个参数是一个匿名方法.
如果按钮在作用域外部, 可以利用 $emit 来执行.
- // 外部调用内部事件
- function reduce(){
- app.$emit('reduce');
- }
二,$once 执行一次的事件
- app.$once('reduceOnce',function(){
- console.log('只执行一次的方法');
- this.num--;
- });
三,$off 关闭事件
- // 关闭事件
- function off(){
- app.$off('reduce');
- }
4. 内置组件 -slot 讲解
slot 是标签的内容扩张, 也就是说你用 slot 就可以在自定义组件时传递给组件内容, 组件接收内容并输出.
先来定义一个的组件, 这个组件用来显示博主的一些信息.
我们在 Vue 构造器里的 data 中给出了信息.
- data:{
- baiduData:{
- url:"https://www.baidu.com/",
- name:"百度",
- skil:"web 前端"
- }
- },
我们用
<template></template>
标签的方式定义了组件:
- <template id="tmp">
- <div>
- <p > 百度地址 </p>
- <p > 网名:</p>
- <p > 技术类型:</p>
- </div>
- </template>
slot 的使用需要两步:
1. 在 HTML 的组件中用 slot 属性传递值.
- <baidu>
- <span slot="url">{{baiduData.url}}</span>
- <span slot="name">{{baiduData.url}}</span>
- <span slot="skil">{{baiduData.skil}}</span>
- /baidu>
2. 在组件模板中用 < slot></slot > 标签接收值.
- <template id="tmp">
- <div>
- <p > 百度地址:<slot name="url"></slot></p>
- <p > 网名:<slot name="name"></slot></p>
- <p > 技术类型:<slot name="skil"></slot></p>
- </div>
- </template>
全部代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>example methods Demo</title>
- <script type="text/javascript" src="../assert/js/vue.js"></script>
- <script type="text/javascript" src="../assert/js/jquery-3.2.1.min.js"></script>
- </head>
- </head>
- <body>
- <h1>example methods Demo</h1>
- <hr>
- <div id="app">
- <baidu>
- <span slot="url">{{baiduData.url}}</span>
- <span slot="name">{{baiduData.url}}</span>
- <span slot="skil">{{baiduData.skil}}</span>
- </baidu>
- </div>
- <template id="tmp">
- <div>
- <p > 百度地址:<slot name="url"></slot></p>
- <p > 网名:<slot name="name"></slot></p>
- <p > 技术类型:<slot name="skil"></slot></p>
- </div>
- </template>
- <script>
- var baidu={
- template:"#tmp"
- }
- var app=new Vue({
- el:'#app',
- data:{
- baiduData:{
- url:"https://www.baidu.com/",
- name:"百度",
- skil:"web 前端"
- }
- },
- components:{
- "baidu":baidu
- }
- })
- </script>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2563662.html