vuejs学习

zoukankan html css js c++ java

vuejs学习
1遇见vuejs

第一个HelloWorld程序
```
<div id="didi-navigator">
    <ul>
        <li v-for="tab in tabs">{{ tab.text}}</li>
    </ul>
</div>
```
```
new Vue({
    el:'#didi-navigator',
    data:{
        tabs:[
        {text:'巴士'},
        {text:'快车'},
        {text:'专车'},
        {text:'顺风车'},
        {text:'出租车'},
        {text:'代驾'}
    }
});
```
2数据绑定

2.1语法

2.1.1插值
```
<span>Text:{{text}}</span>        //替换text
<span>Text:{{*text}}</span>        //只渲染一次，不再发生后续变化
<span>Text:{{{text}}}</span>        //将text当作字符串来处理
<li data-id='{{id}}'></li>                    //可以放在HTML标签内
```
2.1.2表达式
```
{{example | toUppercase}}    //管道
```
2.1.3指令

2.2分隔符
```
//配置分隔符
//1.delimiters
Vue.config.delimiters=["<%","%>"];
//2.unsafedelimiters或者HTML插值
Vue.config.unsafedelimiters=["<$","$>"];
```
3指令

3.1内部指令

3.1.1v-if

3.1.2v-show

3.1.3v-else

3.1.4v-model 双向数据绑定
1. number 将用户的输入转为Number类型
2. lazy
3. debounce 延时
3.1.5v-for

触发数组更新观察的的变异方法：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
- $set
- $remove
3.1.6v-text

3.1.7v-html

3.1.8v-bind
- 在绑定class或style时，支持其他类型的值，如数组或对象。
- 没有参数时，可以绑定到一个对象。此时class和style绑定不支持数组和对象（对象key会转化为小写）
```
//在绑定prop时，prop必须在子组件中声明
<my-component :prop="something"></my-component>
//双向绑定
<my-component :prop.sync="something"></my-component>
//单词绑定
<my-component :prop.once="something"></my-component>
//将绑定的特性名字转换为驼峰命名
<my-component :prop.camel="something"></my-component>
```
3.1.9v-on用于绑定事件监听器
```

<button v-on:click="doThat('hello',$event)"></button>
```
v-on后面不仅可以跟参数，还可以增加修饰符：
- .stop调用event.stopPropagation()
- .prevent调用event.preventDefault()
- .capture添加事件侦听器使用capture模式
- .self只当事件从侦听器绑定的元素本身触发时才出发回调
- .{keyCode|keyAlias}只在指定按键上触发回调
3.1.10v-ref

在父组件上注册一个子组件的索引，便于直接访问。不需要表达式，必须提供参数id。可以通过父组件的$refs对象访问子组件。
v-ref和v-for一起使用时，注册的值将是一个数组。

3.1.11v-el

通过所属实例的(els访问这个元素。可以用v-el:some-el设置this.)els.someEI

3.1.12v-pre

编译时跳过当前元素和它的子元素。可以用来显示原始Mustache标签。跳过大量没有指令的节点便会加快编译

3.1.13v-cloak

v-cloak这个指令保持在元素上直到关联实例结束编译。当和[v-cloak]{display:none}一起使用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕，否则在渲染页面时，有可能用户会先看到Mustache标签，然后看到编译后的数据。

3.2自定义指令

3.2.1基础

vuejs用Vue.directive(id,definition)方法注册一个全局自定义指令，它接受两个参数：指令ID与定义对象。也可以用组件的directive选项注册一个局部自定义指令。
1.钩子函数
- bind——只调用一次，在指令第一次绑定到元素上时调用
- update——在bind之后立即以初始值为参数第一次调用，之后每当绑定值变化时调用，参数为新值与错值
- unbind——只调用一次，在指令从元素上解绑时调用
  2.指令实例属性
  所有的钩子函数都将被复制到实际的指令对象中，在钩子内this指向这个指令对象。这个指令对象暴露了一些有用的属性：
- el——指令绑定的元素
- vm——拥有该指令的上下文viewModel
- expression——指令的表达式，不包括参数和过滤器
- arg——指令的参数
- name——指令的名字，不含前缀
- modifiers——一个对象，包含指令的修饰符
- descriptor——一个对象，包含指令的解析结果
  3.对象字面量
```
//如果指令需要多个值，则可以传入一个Javascript对象字面量。
<div id="demo" v-demo="{color:'white',text:'hello'}"></div>
<script>
    Vue.directive('demo',function(value){
        console.log(value.color);
    });
</script>
```
4.字面修饰符
当指令使用了字面修饰符.literal，它的值将按普通字符串处理并传递给update方法。update方法将只调用一次，因为普通字符串不响应数据变化
5.元素指令
```
<body id="demo">
    <my-directive class="hello" name="hi"></my-directive>
</body>

<script>
   Vue.elementDirective('my-directive',{
        bind:function(){
            console.info(this.el.className);
            console.info(this.el.getAttribute("name");
        }
    });
</script>
var demo= new Vue({
    el:'#demo',
});
```
3.2.2高级选项

3.3内部指令解析

3.4常见问题解析

4计算属性

4.1什么是计算属性
```
var vm = new Vue({
    el:'#example',
    data:{
        didi:'didi',
        family:'family'
    }
    computed:{
        didiFamily:{
            get:function(){
             //一个计算属性的getter
            return this.didi+' '+this.family;
            },
            set:function(newVal){
            //一个计算属性的setter
            var names = newVal.split(' ');
            this.didi=names[0];
            this.family=names[1];
            }
        }
    }
});
```
4.2计算属性缓存

计算属性提供了缓存开关
```
computed:{
    example:{
        cache:false,
        get:function(){
            return Data.now()+this.welcome;
        }
    }
}
```
4.3常见问题

4.3.1计算属性getter不执行的场景
```
//当包含计算属性的节点被移除且模板中其他地方没有再引用该属性时，那么对应的计算属性的getter方法不会执行
<div>
    <button @click='toggleShow'>Toggle Show Total Price</button>
    <p v-if="showTotal">Total Price = {{totalPrice}}</p>
</div>
```
4.3.2在v-repeat中使用计算属性

5表单控件绑定

5.1基本用法

5.1.1text
```
<span>{{ span }}</span>
<br>
<input type="text" v-model="name" placeholder="join DDFE"></input>
```
5.1.2checkbox
```
//复选
<input type="checkbox" id="flash" v-model="bizLine">
<label for="flash">快车</label>
<input type="checkbox" id="premium" v-model="bizLine">
<label for="premium">专车</label>
<input type="checkbox" id="checkbox" v-model="bizLine">
<label for="bus">巴士</label>
```
```
new Vue({
    el:'...',
    data:{
        bizLine:[]
    }
});
```
5.1.3radio
```
<input type="radio" id="flash" v-model="bizLine">
<label for="flash">快车</label>
```
5.1.4select
```
<select v-model="bizLine">
    <option selected value="falsh">快车</option>
    <option value="premium">专车</option>
    <option value="bus">巴士</option>
</select>
<span>selected:{{ bizLIne }}</span>
```
5.2值绑定

在通常情况下，通过v-model绑定的值都是字符串，checkbox可能是布尔值。绑定表单控件的value为某个属性值。
1.checkbox
```
\单个checkbox
<input type="checkbox" v-model="toggle"
```
2.radio
```
<input type="radio" v-model="pick" :value="a"></input>
```
3.select
```
<select v-model="selected">
    <option :value="{number:123}">123</option>
</select>
```
5.3v-model修饰指令

5.3.1lazy

默认情况下，v-model在input事件中同步输入框的值与数据，可以添加一个lazy特性，从而改到chang事件中去同步。
```
<input v-model="msg" lazy><br/>
{{msg}}
```
5.3.2debounce

设置一个最小的延时，在每次敲击之后延时同步输入框的值到Model中。如果每次更新都要进行高耗操作，它较为有用。
```
<input v-model="msg" debounce="500“>
```
5.3.3number

将用户输入同步到model中的时候转换为数值类型，如果转换结果为NaN，则对应的Model值还是用户输入的原始值
```
<input v-model="age" number>
```
5.4修饰指令原理

6过滤器

7组件详解

7.1组件与复用

7.1.1为什么使用组件

使用组件的目的就是提高复用率

7.1.2组件用法

组件注册，有全局注册和局部注册两种方式
```
1. 全局注册
```
```
        Vue.component('my-component',{
            //选项
        });
```
```
2. 局部注册，注册后的组件只在该实例作用域内有效
```
```
    <script>
        var Child={
            template:'<div>局部注册组件的内容</div>'
        }
        var app= new Vue({
            el:'#app',
            components:{
                'my-components':Child,
            }
        });
    </script>   
```
注意
```
1. <table>内规定只允许是<tr><td><th>等这些表格元素，这种情况可以用is属性来挂载组件
```
```
    <table>
    <tbody is="my-component"></tbody>
    </table>
```
```
2.可以像Vue实例一样使用组件注册，但使用data时必须是函数，然后return出去
```
```
    <script>
        Vue.component('my-component',{
            template:'<div>{{message}}</div>',
            data:function(){
                return {
                    message:'组件内容'
                }
            }
        });
    <script>
```
7.2使用props传递数据

7.2.1基本用法

1.使用
2.注意，如果要直接传递数字、布尔值、数组、对象，而且不食用v-bind，传递的仅仅是字符串

7.2.2单向数据流

1.子组件的作用域内任意修改父组件的初始值
2.prop作为需要被转变的原始值传入

7.2.3数据验证

可以在props使用对象写法，进行数据验证

7.3组件通信

7.3.1自定义事件

7.3.2使用v-model

实现这样一个具有双向绑定的v-model组件需要满足一下两个要求：
- 接受一个value属性
- 在有value时触发input事件
7.3.3非父子组件中通信

非父子组件通信的有两种，兄弟组件和跨多级组件：
1.中央事件总线 bus
2.父链
this.(parent和this.)children可以递归上下访问
3.子组件索引
ref =“子组件名”和this.$refs.子组件名，访问指定名称的子组件

7.4使用slot分发内容

7.4.1什么是slot

当需要让组件组合使用，混合父组件的内容与子组件的模板是，就会用到slot，这个过程叫做内容分发。
props传递数据，events触发事件和slot内容分发就构成了Vue的3个API来源，再复杂的组件也是这三个部分组成的

7.4.2作用域

1.编译的作用域
slot分发的内容，作用域是在父组件上的

7.4.3slot用法

单个slot

在子组件内使用特殊的元素就可以为这个子组件开启一个slot，在父组件模板里，插入在子组件中的所有内容就可以替代子组件的标签及它的内容

具名slot

给元素指定一个name后可以分发多个内容，具名slot可以与单个slot共存。

7.4.4作用域插槽

还有些疑问

7.4.5访问slot

通过(slots可以访问某个具名slot，this.)slots.default包括了所有没有被包含在具名slot中的节点。

7.5组件高级用法

7.5.1递归组件

7.5.2内联模板

7.5.3动态组件

7.5.4异步组件

7.6其他

7.6.1$nextTick

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

7.6.2X-Templates

7.6.3手动挂载实例

在一些非常特殊的情况下，需要动态的创建Vue实例，Vue提供了Vue.extend和$extend两个方法来手动挂载一个实例
```
<div id="mount-div"></div>
<script>
var MyComponent=Vue.extend({
        template:'<div>Hello:{{name}}</div>',
        data:function(){
            return {
                name:'Aresn'
            }
        }
});
new MyComponent.$mount('#mount-div');
//另一种挂载方法
new MyComponent({
    el:"#mount-div",
});
#或者在文档之外渲染挂载
var component = new MyComponent().$mount();
document.getElementById('mound-div').appendChild(component.$el);
</script>
```
8自定义指令

9Render函数

10使用webpack

10.1前端工程化与webpack

10.2webpack基础配置

10.2.1

10.2.2

11插件
查看全文

相关阅读:
js 日期2015/12/22/16/45替换2015-12-22 16:45格式
 正则匹配多行内容
 js fs read json 文件json字符串无法解析
 未能加载文件或程序集“Enyim.Caching”或它的某一个依赖项。未能验证强名称签名
 二叉树、多叉树子路径遍历
 p点到(a,b)点两所在直线的垂点坐标及p点是否在(a,b)两点所在直线上
 System.Net.Sockets.Socket SendAsync System.ObjectDisposedException: Cannot access a disposed object.
一个误解: 单个服务器程序可承受最大连接数“理论”上是“65535”
如何用 PyCharm 调试 scrapy 项目
 c或c++的网络库

原文地址：https://www.cnblogs.com/zhouyu0-0/p/11973286.html

1遇见vuejs

第一个HelloWorld程序

2数据绑定

2.1语法

2.1.1插值

2.1.2表达式

2.1.3指令

2.2分隔符

3指令

3.1内部指令

3.1.1v-if

3.1.2v-show

3.1.3v-else

3.1.4v-model 双向数据绑定

3.1.5v-for

3.1.6v-text

3.1.7v-html

3.1.8v-bind

3.1.9v-on用于绑定事件监听器

3.1.10v-ref

3.1.11v-el

3.1.12v-pre

3.1.13v-cloak

3.2自定义指令

3.2.1基础

3.2.2高级选项

3.3内部指令解析

3.4常见问题解析

4计算属性

4.1什么是计算属性

4.2计算属性缓存

4.3常见问题

4.3.1计算属性getter不执行的场景

4.3.2在v-repeat中使用计算属性

5表单控件绑定

5.1基本用法

5.1.1text

5.1.2checkbox

5.1.3radio

5.1.4select

5.2值绑定

5.3v-model修饰指令

5.3.1lazy

5.3.2debounce

5.3.3number

5.4修饰指令原理

6过滤器

7组件详解

7.1组件与复用

7.1.1为什么使用组件

7.1.2组件用法

组件注册，有全局注册和局部注册两种方式

注意

7.2使用props传递数据

7.2.1基本用法

7.2.2单向数据流

7.2.3数据验证

7.3组件通信

7.3.1自定义事件

7.3.2使用v-model

7.3.3非父子组件中通信

7.4使用slot分发内容

7.4.1什么是slot

7.4.2作用域

7.4.3slot用法

单个slot

具名slot

7.4.4作用域插槽

7.4.5访问slot

7.5组件高级用法

7.5.1递归组件

7.5.2内联模板

7.5.3动态组件

7.5.4异步组件

7.6其他

7.6.1$nextTick

7.6.2X-Templates

7.6.3手动挂载实例

8自定义指令