dinglittle / vue.js-start Goto Github PK
View Code? Open in Web Editor NEWVue.js 学习之路
Home Page: https://cn.vuejs.org
Vue.js 学习之路
Home Page: https://cn.vuejs.org
<!DOCTYPE html>
<html>
<head>
<title>vue</title>
<style>
.show {
width: 300px;
height: 100px;
border: 1px solid;
}
.active{
color:green;
}
.isDisable:{
color: yellow;
}
</style>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<!-- <app-nav> -->
<h1 v-text="message">{{ message }}</h1>
<h1 >{{ message }}</h1>
<!-- </app-nav> -->
<!-- <app-view> -->
<div class="show" v-bind:title="message">
鼠标悬停几秒查看此处动态绑定的提示信息
</div>
<div class="show" v-bind:title="tempTime">
v-bind 动态绑定的时间 {{tempTime}}
</div>
<div class="show">
<ol>
<li v-for="item in tempArr">
{{item.text}}
</li>
</ol>
</div>
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
<button @click="reverseMessage">逆转消息</button>
<input v-model="message">
<!-- 使用自定义的组件 -->
<ol>
<todo-item v-for='item in tempArr' v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
<div v-once>
{{message}}
</div>
<div v-html="tempHtml"></div>
<div v-if="isShow">
看到我了
</div>
<a :href="tempUrl">tempUrl</a>
<div>
{{ reverseMessage2 }}
</div>
<p>Ask a yes/no question:
<input v-model="question">
</p>
<p>
{{ answer }}
</p>
<p v-bind:class="{ active:isActive }">testClass</p>
<p v-if="isTrue">isTrue</p>
<!-- v-if key -->
<div v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</div>
<div v-else>
<label>Email</label>
<input placeholder="Enter your email addredd" key="email-input">
</div>
<button @click="toggleType">Toggle login type</button>
<ul>
<li v-for="item in tempArr2">
{{item.text}}
</li>
</ul>
123
<ul>
<!-- v-if 用来区过滤显示 -->
<li v-for="item in tempArr2" v-if="!item.id">
{{item.text}} - {{item.id}}
</li>
</ul>
<ul>
<li v-for="(value,key) in tempObj">
{{key}}:{{value}}
</li>
</ul>
<ul>
<li v-for="n in evenNumbers">{{n}}</li>
</ul>
<div>
<input
v-model="newTodoText"
v-on:keyup.enter="addNewTodo"
placeholder="Add a todo"
>
<ul>
<!-- 这里的 is 是指向 自定义的组件 -->
<!-- <li
is="todo-item2"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
>{{todo.id}}-{{todo.title}}</li>
</ul> -->
<ul>
<li
is="todo-item2"
v-for="(todo, index) in todos"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
</div>
<!-- v-on 事件 -->
<!--
.stop 阻止单击事件冒泡
.prevent 提交事件不再重载页面
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(比如不是子元素)触发才会回调
.once 只执行一次
-->
<div @click="clickFn">
<button @click.stop="clickFn">v-on事件</button>
</div>
<!-- check -->
<input type="checkbox" v-model="checked">
<label for="checked">{{checked}}</label>
<!-- 多个 checkbox ,绑定到同一个数组 -->
<br>
<input type="checkbox" value="jack" v-model="checkedNames">
<label for="jack">jack</label>
<input type="checkbox" value="lili" v-model="checkedNames">
<label for="lili">lili</label>
<input type="checkbox" value="lucy" v-model="checkedNames">
<label for="lucy">lucy</label>
<input type="checkbox" value="meimei" v-model="checkedNames">
<label for="jack">meimei</label>
<br>
<label>{{checkedNames}}</label>
<br>
<!-- <input type="checkbox" v-model="toggle" v-bind:true-value="addNewTodo" v-bind:false-value="addNewTodo"> -->
<input type="text" name="" value="" placeholder="test lazy" v-model.lazy="lazyMsg">
<br>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<ul>
<li
is="sub-component"
v-for="item in tempArr3"
v-bind:title="item">
</li>
<!-- <li
is="todo-item2"
v-for="(todo, index) in todos"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li> -->
<li v-for="item in tempArr3">{{item}}</li>
</ul>
<!-- prop 验证 -->
<!-- 设置传参规则 , 不符合会发警告 -->
<ul>
<li
is="prop-reg"
v-for="item in [1,2,3,55]"
v-bind:propa="item"
></li>
</ul>
<!-- v-on自定义事件 -->
<div>
{{ total }}
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
<!-- </app-view> -->
</div>
<script>
//组件
//定义 todo-item 组件
//注意, 全局组件要定义在 Vue 实例前, 否则检测不到
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
let vm = new Vue({
el: '#app',
data: {
message: 'HelloVue!',
tempTime: '页面加载于' + new Date().toLocaleString(),
tempArr: [{ text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个项目' }],
tempHtml: '<button v-on:click="reverseMessage">tempHtml</button>',
isShow: true,
tempUrl: 'https://www.baidu.com',
question: '',
answer: 'I cannot give you an answer until you ask a question',
isActive: true,
isTrue: true,
loginType: 'username',
tempArr2:[{text:'name1'},{text:'name2',id:true}],
tempObj: {'name':'lwj','age':18},
numbers: [1,2,3,4],
newTodoText: '',
todos:[
{id:1, title:'Do the dishes'},
{id:2, title:'Take out the trash'},
{id:3, title:'Mow the lawn'}
],
nextTodoID: 4,
checked:'',
checkedNames: [],
toggle:'',
lazyMsg:'test',
counter:0,
tempArr3:[1,2,3],
total: 0
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('');
},
getAnswer: function() {
if (this.question.indexOf('?') == -1) {
this.answer = 'Question usually contain a quesion mark';
return
}
this.answer = 'Thinking...';
},
toggleType: function(){
if(this.loginType == 'username'){
this.loginType = 'email'
console.log('0'+this.loginType)
} else {
this.loginType = 'username'
console.log('1'+this.loginType)
}
},
addNewTodo: function(){
this.todos.push({
id:this.nextTodoID++,
title:this.newTodoText
})
this.newTodoText = ''
},
clickFn: function(){
alert('clickFn')
},
incrementTotal: function(){
this.total +=1
}
},
computed: {
reverseMessage2: function() {
return Date.now();
},
evenNumbers: function(){
return this.numbers.filter(function(number){
return number % 2 ==0
})
}
},
watch: {
question: function(newQuestion) {
console.log(newQuestion);
this.answer = 'Watting for you to stop typing...'
var vm = this;
setTimeout(function(){
vm.getAnswer();
},2000)
}
},
components:{
'todo-item2':{
template:'\
<li>\
{{title}}\
<button @click="$emit(\'remove\')">X</button>\
</li>\
',
props:['title']
},
'simple-counter':{
template:'<button @click="counter+=1">{{counter}}</button>',
data:function(){
return {
counter: 0
}
}
},
'sub-component':{
template:'<li>{{value}}</li>',
props:['title'],
data:function(){
return { value: this.title*10}
}
},
'prop-reg':{
template: '<li>{{propa}} {{propb}} {{propc}} {{propd}} {{prope}} {{propf}}</li>',
props:{
propa: Number,
propb: [String, Number],
propc: {
type: String,
require: true
},
propd: {
type: Number,
default: 100
},
prope: {
type: Object,
default: function(){
return { message: 'hello' }
}
},
propf: {
validator :function(value){
return value > 10
}
}
}
},
'button-counter':{
template: '\
<button v-on:click="incrementCounter">{{ counter }}</button>\
',
data: function(){
return {
counter: 0
}
},
methods: {
incrementCounter: function(){
this.counter += 1
this.$emit('increment')
}
}
}
}
})
// $watch 监听
vm.$watch('message', function(newValue, oldValue) {
console.log(newValue, oldValue);
console.log(vm.$el);
console.log(vm.$data);
})
</script>
</body>
</html>
问题描述:
子组件要实现更改父组件的传值(将父组件的传值,进行更改为自己的值),需要通过 data
(对象形式)来改变成为局部变量
//单向数据流
//更改传入的值
Vue.component('child3',{
props:['myMessage2'],
template:'<p>{{myMessage2}}</p>',
data:function(){
return {
counter:this.myMessage2+'1123'
}
},
// computed:{
// normalizedSize :function(){
// return this.myMessage2.toUpperCase();
// }
// }
})
报错:
vue.js:569 [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.
1. 组件的使用,全局组件以及,局部组件的定义必须放在 vue 实例前,否则检测不到。
2.全局组件定义
Vue.component('my-component',{
<p>i am a component</p>
});
3.局部组件
局部组件,需要先定义一串组件字符串,然后在 Vue 实例中,调用
var comStr = "<p>this a component str</p>";
new Vue({
components:{
'my-component': comStr
}
})
4.当使用 DOM 作为模版时,会受到 HTML 的一些限制,如 包裹元素 table ul 等,这时就需要 is
属性
<table>
<tr is="my-component"></tr>
</table>
5.正确使用组件,组件中的 data 必须是函数
假如组件中使用的 data 不是一个函数,Vue 会警告 data 必须是一个函数,所以要先定义一个 data ,然后以函数 的形式返回
1)先定义一个 data
var data = {counter:0}
2)在组件中返回
Vue.component('simple-counter',{
template:'<button v-on:click="counter+=1">{{counter}}</button>',
data:function(){
return data
}
})
这种形式的使用 组件,给每个组件都赋值了同样的值,因此增加 counter 会影响所有的组件,
改进办法,通过为每个组件返回全新的 data 对象
data: function(){
return { counter:0 }
}
6.组件中通过 prop 传递数据
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。
要让组件使用父组件的数据,我们需要通过了组件的 prop 选项。
子组件要显式地用 prop 选项来声明它期待获得数据:
Vue.component('child',{
//声明 props
props:['message'],
//就像 data 一样, prop 可以用在模板内
//同样也可以在 vm 实例中像 'this.message' 这样使用
template:'<span> {{message}} </span>'
})
然后,我们可以这样传入一个普通字符串:
<child message="hello!"></child>
7.动态 prop
在模板中,要动态地绑定父组件的数据到子模板 props,与绑定到任何普通的HTML特性相类似,就是用 v-bind 。每当组件的数据变化时,该变化也会传导给子组件
<div>
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
//v-bind 简写
<child :my-message="parentMsg"></child>
</div>
8.字面量语法 VS 动态语法
初学者都常犯一个错误是使用字面语法传递数值
<comp some-prop="1"></comp>
因为它是一个字面 prop,它的值是字符串 "1" , 而不是number。如果想传递一个实际的number,需要使用 v-bind
,从而让它的值被当作 JavaScript 表达式计算:
<comp v-bind:some-prop="1"></comp>
9.单向数据流
prop 是单向绑定的: 当父组件的属性变化时,将传导给子组件,但是不会反过来。
这是为了防止子组件无意修改了父组件的状态 —— 这会让应用的数据难以理解。
别外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变prop。如果你这么做了,Vue 会在控制给出警告。
为什么我们会有修改 prop 中数据的冲动呢?通常是这两种原因:
1)prop 作为初始值传入后,子组件想把它当作局部数据来用;
2)prop 作为初始值传入,由子组件处理成其它数据输出。
这两种原因,正确的应对方式是:
props:['initialCounter'],
data:function(){
return { counter: this.initialCounter }
}
props:['size'],
computed:{
normalizedSize: function(){
return this.trim( ).toLowerCase( )
}
}
10.prop 验证
我们可以为组件的 props 指定验证规格。 如果传入的数据不符合规格, Vue 会发出警告。当组件给其他使用时,这很有用。
要指定验证规格,需要用对象的形式,而不能用字符串数组:
Vue.component('example',{
props:{
//基础类型检测( null 意思是任何类型都可以 )
propA: Number ,
//多种类型
propB: [String, Number],
//必传且是字符串
propC:{
type: NUmber,
default: 100
},
//数组/对象的默认值应当由一个工厂函数返回
propE:{
type: Object,
default : function( ){
return { message: 'hello' }
}
},
//自定义验证函数
propF:{
validator : function( value){
return value>10
}
}
}
})
type
可以是下面原生构造器
-String
-Number
-Boolean
-Function
-Object
-Array
type
可以是一个定义构造器函数,使用 instanceof
检测
当 prop 验证失败,Vue 会在抛出警告(如果使用的是开发版本)
列表渲染 -> 组件 和 v-for -> todo list 完整例子
https://cn.vuejs.org/v2/guide/list.html#组件-和-v-for
????
在默认情况下,v-model
在input
事件中同步输入的值与数据(除了上述 IME部分),但你可以添加一个修饰
符 lazy
,从而转变为在change
事件中同步
<!-- 在 change 而不是 input 事件中更新 -->
<input v-model.lazy="msg">
这里的意思是,在输入完毕,Input 失去焦点的时候才 同步数据
这个通常很有用,因为在type="number"
时,HTML中输入的值也总是会返回 字符串类型。
<input v-model.number="age" type="number">
这里的意思是,正常的 input type="nubmer" 时返回的类型依旧是 字符串,并不是数值型,在绑定数据的时候加上 .number
相当于,给加了一个 转换 number
如果要自动过滤用输入的首尾空格,可以添加trim
修饰符到 v-model
上过滤输入:
<input v-model.trim="msg">
这个类似 java 中的 strim ( 去除空格 )
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="lxjsSdk.js"></script>
<title>JsBridge</title>
<style>
html,body{
margin: 0;
padding: 0;
}
h1{
text-align: center;
}
p{
font-size: 14px;
margin: 6px 6px;
padding: 8px;
border: 2px solid skyblue;
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<h1>webview3.0 bridge demo</h1>
<p><a href="http://wiki.longhu.net/pages/viewpage.action?pageId=16059250">使用指南:http://wiki.longhu.net/pages/viewpage.action?pageId=16059250</a></p>
<br>
<p><a href="https://mop.longfor.com:27239/jsbridge3.0/index.html">demo地址:https://mop.longfor.com:27239/jsbridge3.0/index.html</a></p>
<p onclick="createIfm('newTarget', 'webType=1&title=' + encodeURIComponent('新页面打开title') +'&htmlTitle=0&url=' + encodeURIComponent('http://218.205.151.124:44509/jsbridge3.0/index.html'))">在新的WebView页面打开URL</p>
<p onclick="createIfm('newTarget', 'webType=1&htmlTitle=1&orientation=4&url=' + encodeURIComponent('http://218.205.151.124:44509/jsbridge3.0/index.html'))">在新的WebView页面打开URL(横屏)</p>
<p onclick="setNav()">设置导航栏backclose</p>
<p onclick="setNav1()">设置导航栏reload</p>
<p onclick="setNav2()">设置导航栏back</p>
<p onclick="setNav3()">设置导航栏close</p>
<p onclick="createIfm('setTitle', 'title变了')">设置title</p>
<p onclick="createIfm('tel', '13716939007')">打电话</p>
<p onclick="createIfm('message', 'receivers=18612537578,18812345678&message=H5Bridge短信测试')">发短信</p>
<p onclick="createIfm('email', '[email protected],[email protected]&subject=H5Bridge邮件测试&content=邮件测试内容', 'emailCallback')">发邮件</p>
<p onclick="createIfm('choicePhoto', 'max=1&edit=1', 'photoCallback')">从相册中选取图片(单选可裁剪)</p>
<p onclick="createIfm('choicePhoto', 'max=9', 'photoCallback')">从相册中选取图片(最多选九张)</p>
<p onclick="createIfm('takePhoto', 'edit=1', 'photoCallback')">拍照功能</p>
<p onclick="createIfm('back2history')">返回上一页</p>
<p onclick="createIfm('back2historyanddo', 'back2historyanddo(\'我是参数\')')">关闭webview并执行上一页的js</p>
<p onclick="createIfm('reload')">刷新</p>
<p onclick="createIfm('jumpOut', 'https://www.baidu.com/')">跳转到其他应用功能</p>
<p onclick="createIfm('app', '','appCallback')">查看app信息</p>
<p onclick="createIfm('device', '','deviceCallback')">获取设备的相关信息</p>
<p onclick="createIfm('custom', 'longfor://navigator/native?url=' + encodeURIComponent('lflx://switch_login'))">自定义(这里用跳转到龙信登录页示例)</p>
<hr>
<h1>龙信专用</h1>
<p onclick="createIfm('custom', 'longfor://navigator/native?url=' + encodeURIComponent('lflx://login'))">跳转到login</p>
<p onclick="createIfm('custom', 'longfor://navigator/native?url=' + encodeURIComponent('lflx://switch_login'))">跳转到switch_login</p>
<p onclick="createIfm('custom', 'longfor://share/contentBridge?type=img&imgUrl=' + encodeURIComponent('http://longfor.net?pictureId=dd4f0658e55ae9d3ff50b2eec46a5333.jpg'))">转发图片</p>
<p onclick="createIfm('custom', 'longfor://share/contentBridge?type=text&content=你好')">转发纯文字</p>
<p onclick="createIfm('custom', 'longfor://share/contentBridge?type=richText&title=富文本&content=富文本内容&imgUrl=' + encodeURIComponent('http://longfor.net?pictureId=dd4f0658e55ae9d3ff50b2eec46a5333.jpg') + '&url=' + encodeURIComponent('http://www.baidu.com'))">转发富文本</p>
<p onclick="createIfm('custom', 'longfor://user/userInfo?callback=userInfoCallBack')">获取当前用户信息</p>
<p onclick="createIfm('custom', 'longfor://scan/qrCode?callback=qrCodeCallBack')">扫描二维码</p>
<p onclick="createIfm('custom', 'longfor://map/location?callback=locationCallBack')">获取定位信息</p>
<p onclick="createIfm('custom', 'longfor://token/getToken?callback=tokenCallBack')">获取token</p>
<p onclick="createIfm('custom', 'longfor://selectContacts/pickerStaff?limit=5&includeSelf=0&callback=selectContactsCallback')">选择联系人</p>
<script>
function setNav() {
var x = 'left=[{"action":"backclose"}]&right=[{"action":"js","title":"搜索","js":"toSearch(\'我是参数\')"},{"action":"js","image":"lxh_call","js":"tel(\'13888888888\')","bundle":"UniXinLib"}]'
createIfm('setNav', x)
}
function setNav1() {
var x = 'left=[{"action":"reload","title":"自定义reload"}]'
createIfm('setNav', x)
}
function setNav2() {
var x = 'left=[{"action":"back","title":"自定义back"}]'
createIfm('setNav', x)
}
function setNav3() {
var x = 'left=[{"action":"close","title":"自定义close"}]'
createIfm('setNav', x)
}
function toSearch(res) {
alert('搜索:' + res)
}
function tel(res) {
createIfm('tel', res)
}
function emailCallback(res) {
alert('发邮件回调')
alert(res)
}
function photoCallback(res) {
alert('相片回调')
alert(res)
}
function takePhotoCallback(res) {
alert('相片回调')
alert(res)
}
function back2historyanddo(res) {
alert('back2historyanddo参数:' + res)
}
function appCallback(res) {
alert(res)
}
function deviceCallback(res) {
alert(res)
}
function userInfoCallBack(res) {
alert('获取当前用户信息回调')
alert(res)
}
function qrCodeCallBack(res) {
alert('扫描二维码回调')
alert(res)
}
function locationCallBack(res) {
alert('获取定位信息回调')
alert(res)
}
function tokenCallBack(res) {
alert('获取token回调')
alert(res)
}
function selectContactsCallback(res) {
alert('选择联系人回调')
alert(res)
}
</script>
</body>
</html>
v-bind: 指令用于响应地更新 HTML 特性 形式如:v-bind:href 缩写为 :href;
v-on: 指令用于监听DOM事件 形式如:v-on:click 缩写为 @click;
<body>
<div id="test">
<img v-bind:src="src">
<a v-bind:href="url">百度一下</a>
<a :href="url">百度一下</a>
<a href="{{url}}">百度一下</a>
<a v-on:click="update()" href="#">更改图片</a>
<a @click="update()" href="#">更改图片</a>
</div>
<script type="text/javascript">
new Vue({
el: '#test',
data: {
url: "https://www.baidu.com",
src: "img/spring.jpg"16 17 18 },
methods: {
update: function(){
this.src = "img/summer.jpg";
}
}
})
</script>
</body>
<keep-alive>
<router-view></router-view>
</keep-alive>
判断用户登录
路由 beforeEach 拦截, 判断用户状态 如果登录, 就正常跳转, 非登录 , 跳到登录页
vm.$el
vm.$data
vm.$watch
页面
input v-model="answer"
{{ question }}
watch
quesiotn:funciton(){
this.answer = 'waitting stop write"
var vm = this;
setTimeout(funciton(){
vm.getAnswer;
},2000)
}
methods
getAnswer:function(){
if(this.quesion.indexOf('?') == -1){
this.answer = "请以?结尾"
return;
}
this.answer = "watting..."
}
v-text 取消页面数据绑定, 在无值的时候 显示 {{}}
vue中computed计算属性,基于依赖进行缓存
计算属性只有在它的相关依赖发生改变时,才会重新求值.
多次访问同一个计算属性,结果不会变
vue通过v-if配合key来判断用户or邮件输入
Username
Email
v-for和v-if配合使用
v-for可以遍历 computed 处理过的数据
computed:{
evenNumbers: function(){
return this.numbers.filter(function(number){
return number % 2 == 0
})
}
}
v-for与组件的使用
<input
v-model="nextTodoText"
v-on:keyup.enter="addNewTodo"
placeholder="Add a todo"
component
template:'
自定义的 组件会被当作无效的内容,因此会导致错误的渲染结果
解决方案: 使用特殊的 is 特性
组件中
prop是单向绑定的,当父组件的属性变化时,将传导给子组件,但是反过来不会
这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解
每次父组件更新时,子组件的所有prop都会更新为最新值,这意味着不应该在子组件内部改变prop
否则,vue会在控制台给出警告
两种情况,修改prop中数据:
1.prop作为初始值传入后,子组件想把它当作局部数据来用
2.prop作为原始数据传入,由子组件处理成其它数据输出
解决方法:
1.定义一个局部变量,并用prop的值初始化它
props:['initialCounter'],
data:function(){
return { counter: this.initialCounter }
}
2.定义一个计算属性,处理prop的值并返回
props:['size'],
computed:{
normalizedSize:function(){
return this.size.trim().toLowerCase()
}
}
组件不能是单独的字符串,必须有元素承载
组件中的 props 参数不区分大小写(通常小写) 且必须是定义的,
当通过 传参验证时,规则定义 也是小写, 不符合规则的传参会警告
组件定义规则的时候,需要以对象的形式返回
html:
component:
"prop-reg":{
template:'{{ propa }}-{{ propb }}-{{ propc }}-{{ propd }}-{{ prope }}-{{ propf }}',
props:{
}
}
注意 prop 会在组件实例创建之前进行校验,所以在 default 或 validator 函数里,
诸如 data computd 或 methods 等实例属性还无法使用.
v-on自定义事件
1.自定义组件,该组件 绑定一个自定义事件
component
'button-counter':{
template:'{{ counter }}',
data: function(){
return {
coutner: 0
}
},
methods: {
incrementCounter: function(){
this.counter +=1
// 广播 increment 事件
this.$emit('increment')
}
}
}
html
页面监听到的方法是组件 emit 出来的 increment 自定义方法,这具方法 指向 全局方法
全局方法
methods:{
incrementTotal:function(){
this.total +=1
}
}
该例子中,子组件已经和它外部完全解耦了,它所做的只是报告自己的内部事件,
因为父组件可能会关心这些事件
全球首届Vue.js开发者大会将于2017年5月20日在北京航空航天大学新主楼会议中心举办。Vue.js作者将出席本次大会,并发表主题演讲。
https://vue.w3ctech.com/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.