前端框架Vue

什么是Vue？

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

Vue可以用来做什么？

Vue可以做从简单到复杂的前端单页应用，随处可见的Web前端都可以用Vue来开发。

为什么使用Vue？

1、轻量级
2、js语法
3、入门及上手快

vue与Jquery比较?

1、jquery关注dom
2、vue关注数据，不关注dom

Vue.js 安装

使用 <script> 标签引入。

Vue的书写格式

<div id="vue_det">
    <h1>{{details()}}</h1>  <!--使用两个括号来展示数据-->
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',  //表明作用域
        data: {          //存储数据
            ………
        },
        methods: {       //事件处理方法
            details: function() {
                ……
            }
        }
    })
</script>

Vue的对象

1、el：Vue的作用域，即只有在这个作用域里面的dom受Vue控制
2、data：vue页面的数据模型，该数据模型为一个javascript对象，且在运行过程中该对象的属性不允许增加，因此页面数据模型必须提前定义好
3、methods：事件处理方法对象

数据绑定

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

2、使用 v-html 指令用于输出 html 代码
示例：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>Vue</h1>'
  }
})
</script>

3、HTML 属性中的值应使用 v-bind 指令，参数在指令后以冒号指明。
示例

<div id="app">
    <pre><a v-bind:href="url">百度</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.baidu.com'
  }
})
</script>

4、 v-model 指令来实现双向数据绑定

5、 v-on 指令，它用于监听 DOM 事件

过滤器（可以接受参数）

示例

<div id="app">
  {{ message | capitalize }}
  <div v-bind:id="rawId | formatId"></div>
</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>

条件语句

1、v-if
2、v-else
3、v-else-if
4、v-show
注意：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
示例

<div id="app">

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

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

v-if 和 v-show的区别

（1）手段：
v-if是动态的向DOM树内添加或者删除DOM元素；
v-show是通过设置DOM元素的display样式属性控制显隐；
（2）编译过程：
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；
（3）编译条件：
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
（4）性能消耗：
v-if有更高的切换消耗；
v-show有更高的初始渲染消耗；
（5）使用场景：
v-if适合运营条件不大可能改变；
v-show适合频繁切换。

循环语句

循环使用 v-for 指令。
示例

<div id="app">
  <ol>
    <li v-for="site in sites">  //固定写法  参数 in 数组/对象…
      {{ site.name }}
    </li>
  </ol>
  <ul>
    <li v-for="(value, key) in sites">
    {{ key }} : {{ value }}
    </li>
  </ul>
  <ul>
    <li v-for="(value, key, index) in sites">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

样式绑定

一、Class属性绑定

1、行内对象绑定

<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
</style>

<div id="app">
  <div v-bind:class="{ active: isActive }"></div>
</div>

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

2、预定义对象绑定

<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>

<div id="app">
  <div v-bind:class="classObject"></div> //直接绑定对象
</div>

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

3、数组绑定

<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}

<body>
<div id="app">
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>

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

二、style属性绑定

1、行内对象绑定

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">123</div>
</div>

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

2、预定义对象绑定

<div id="app">
  <div v-bind:style="styleObject">123</div>
</div>

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

3、数组绑定

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">123</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
    overridingStyles: {
      'font-weight': 'bold'
    }
  }
})
</script>

Vue初始化方法

Mounted
在vue初始化完成后调用该方法,一般用于vue初始化完成后需要自动执行的代码。
示例

new Vue({
  el: '#app',
  data: {
    totalMoney: 0,
    productList: []
  },
  filters: {
  },
  mounted: function() {
           //书写需要自动执行的代码
  }
 
});

v-model 指令在表单控件元素上创建双向数据绑定

一、单选框和复选框

示例

<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" value="asd" 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 : 123,
    checkedNames: [1]
  }
})
</script>

注意
1、checked的值根据勾选状态的不同而改变，但不是true就是false
2、checkedNames是一个数组，里面元素包含的是你选中的的复选框的所有的value

二、下拉菜单

示例

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

注意
根据你选中的哪个option，然后你绑定的模板所对应的值就是你选中的那个option的value

Vue的组件

书写格式
Vue.component('组件名',{props:['属性名'],template:'模板内容'})

1、组件的简单书写格式

<div id="app">
    <runoob></runoob>   <!--自定义组件的是使用-->
</div>

<script>
Vue.component('runoob', {  //自定义组件
  template: '<h1>自定义组件!</h1>'
})
new Vue({
  el: '#app'
})
</script>

2、新建一个.js文件，将Vue的组件书写在这个文件中，使用<script> 标签引入

1）新建.js文件

Vue.component('my-clock',{
    props:[
        'format'      //自定义组件的属性，可以用来传递值
    ],
    template:'<h3>{{d|formatdate(format)}}</h3>',   //将值传递给过滤器使用
    filters:{
        formatdate:function(d,frm){                
            var dt= d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
            var tm=d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
            if(frm=='date'){
                return dt;
            }else if(frm=='time'){
                return tm
            }else{
                return dt+' '+tm
            }
                }
    },

    data: function(){     //必须使用函数 将数据进行隔离，否则多个位置使用同一个组件数据会共享
        return {
            d: new Date()            }
    },
    methods:{
        updatetime: function (){
            this.d=new Date()
        }
    },

    mounted:function (){
        setInterval(this.updatetime,1000);
    }
});

2）引入.js文件，并使用自定义组件

<script src="js/vue_00.js"></script>
<div id="qwee">   
      <my-clock format="data"></my-clock>
</div>            
<script>
    new Vue({
        el:"#qwee"
    })
</script>

什么是Vue？

Vue可以用来做什么？

为什么使用Vue？

vue与Jquery比较?

Vue.js 安装

Vue的书写格式

Vue的对象

数据绑定

过滤器（可以接受参数）

条件语句

v-if 和 v-show的区别

循环语句

样式绑定

一、Class属性绑定

1、行内对象绑定

2、预定义对象绑定

3、数组绑定

二、style属性绑定

1、行内对象绑定

2、预定义对象绑定

3、数组绑定

Vue初始化方法

v-model 指令在表单控件元素上创建双向数据绑定

一、单选框和复选框

二、下拉菜单

Vue的组件

1、组件的简单书写格式

2、新建一个.js文件，将Vue的组件书写在这个文件中，使用<script> 标签引入

1）新建.js文件

猜你喜欢