dinglittle / vue.js-start Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 22.52 MB

Vue.js 学习之路

Home Page: https://cn.vuejs.org

JavaScript 86.06% HTML 12.19% Vue 1.76%

vue

vue.js-start's People

Stargazers

Watchers

vue.js-start's Issues

.vue 文件神坑

坑

当vsCode 用来 Eslink 的时候,.vue 文件中的 script 里面

1. 字符串不能用双引号 "" , 需要改成单引号 ' '
2. data_()_{ ... } data 前后必须有空格 ( function 前后必须有空格 , 必须是 return 返回对象 )

vue-index

<!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>

import! 组件坑——子组件要更改父组件的传值

问题描述：
子组件要实现更改父组件的传值（将父组件的传值，进行更改为自己的值），需要通过 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 作为初始值传入，由子组件处理成其它数据输出。
这两种原因，正确的应对方式是：

1.定义一个局部变量，并用 prop 的值初始化它:

props:['initialCounter'],
data:function(){
  return { counter: this.initialCounter }
}

2.定义一个计算属性，处理 prop 的值并返回。

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

列表渲染 -> 组件和 v-for -> todo list 完整例子
https://cn.vuejs.org/v2/guide/list.html#组件-和-v-for

？？？？

表单控件绑定——修饰符

--.lazy:

在默认情况下，v-model在input事件中同步输入的值与数据(除了上述 IME部分)，但你可以添加一个修饰
符 lazy，从而转变为在change事件中同步

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

这里的意思是，在输入完毕，Input 失去焦点的时候才同步数据

--.number:

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

<input v-model.number="age" type="number">

这里的意思是，正常的 input type="nubmer" 时返回的类型依旧是字符串，并不是数值型，在绑定数据的时候加上 .number 相当于，给加了一个转换 number

--.trim

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

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

这个类似 java 中的 strim ( 去除空格 )

jsbridge

<!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 、v-on

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 做数据缓存

<keep-alive>
    <router-view></router-view>
</keep-alive>

Vue.js轻松实现页面后退时，还原滚动位置

from: https://segmentfault.com/a/1190000009742382

vue-txt 20171108

判断用户登录

路由 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配合使用

上面代码只传递了未 complete 的 todos

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"

{{todo.title}}

component
template:'

{{ title }}
<button @click="$emit('remove')")>X

',
props:['title']

自定义的组件会被当作无效的内容,因此会导致错误的渲染结果
解决方案: 使用特殊的 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
}
}

该例子中,子组件已经和它外部完全解耦了,它所做的只是报告自己的内部事件,
因为父组件可能会关心这些事件

VueConf 大会

全球首届Vue.js开发者大会将于2017年5月20日在北京航空航天大学新主楼会议中心举办。Vue.js作者将出席本次大会，并发表主题演讲。
https://vue.w3ctech.com/