vue第一天

vue是什么

Vue是一个前端js框架，由尤雨溪开发，是个人项目 目前由饿了么ude团队进行维护

这是它的[官网]https://cn.vuejs.org/
有一点需要注意的是，不兼容ie8及以下的浏览器

vue是渐进式JavaScript框架 用到什么功能，只需要引入什么功能模块 spa单页应用 v-router
vue的主张较弱
“渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个概念

Vue可以在任意其他类型的项目中使用，使用成本较低，更灵活，主张较弱，在Vue的项目中也可以轻松融汇其他的技术来开发，并且因为Vue的生态系统特别庞大，可以找到基本所有类型的工具在vue项目中使用

特点：易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好）

Vue是一个MVVM的js框架，但是，Vue 的核心库只关注视图层，开发者关注的只是m-v的映射关系

那vue是如何创建或使用的呢

1.创建，vue实例中的数据是放在data里的，

new Vue({
     
   el: "#app",  //通过id或者class绑定到dom结构上
    data:{
      //数据存储
        msg: "hello",//字符串
        num: 1,//number
        bool: true,//boolean
        nulls: null,
        udf: undefined,
        arr: [1,2,3],//数组
        objects: {
     name:"12",age:15}//对象
    }
})

2.那如何将数据展示在页面上

<div id="app">
    <p>{
     {
     msg}}</p>   
    <p>{
     {
     num}}</p>
    <p>{
     {
     bool}}</p>
    <p>{
     {
     nulls}}</p>
    <p>{
     {
     udf}}</p>
    <p>{
     {
     arr}}</p>
    <p>{
     {
     arr[2]}}</p>
    <p>{
     {
     objects}}</p>
    <p>{
     {
     objects.name}}</p>
</div> //在标签内部通过双括号括起来，null和undefined是不显示的

3.vue中也提供了很多for循环事件添加等等的方法

new Vue({
     
   el: "#app",
    data: {
     
        arr : [
            {
     name: "张吉浩",sex: "男", age: 15},
            {
     name: "宋婷婷",sex: "女", age: 18},
            {
     name: "逄永康",sex: "男", age: 25},
            {
     name: "王相民",sex: "男", age: 35}
        ]
    }
})
//在html中这样写
<table id="app">
  <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in arr">
            <td>{
     {
     item.name}}</td>
            <td>{
     {
     item.sex}}</td>
            <td>{
     {
     item.age}}</td>
        </tr>
    </tbody>
</table>

通过v-for指定绑定，其中item是数组中的每一项，arr是data中的数组
4.现在知道了循环，那js中的事件如何添加
通过v-on绑定，也可以简写成 ‘@’,at符号，有多种方式进行绑定
①直接在v-on后面的事件中填写js代码
②在v-on后面添加事件的函数名，然后在vue中的methods属性处，写对应函数

<div id = "app">
	//第一种
	<p><button v-on:click="++num">单击加</button></p>
	<p><button @dblclick="--num">双击减</button></p>
	//第二种
	<p><button @contextmenu.prevent="contextmenu">右键点击</button></p>
</div>
//vue中代码
new Vue({
     
   el: "#app",
    data: {
     
        num: 1
    },
    methods: {
     
        contextmenu(e){
     
            console.log("右键菜单");
        }
    }
})

5.如何在页面上修改信息，并且页面展示上同时更新呢
vue提供了v-model这个方法，但是只可以用在input中

<div id="app">
    <input type="text" v-model="msg">
    <input type="checkbox" v-model="isBool">{
     {
     isBool}}
    <button @click="isBool=!isBool">{
     {
     msg}}</button>
    <p>
        <input type="text" v-model.lazy="msg">//失去焦点时触发
        {
     {
     msg}}
    </p>
    <p>
        <input type="text" v-model.number="msg">
        //默认将输入框中的数据进行parseFloat
        {
     {
     msg}}
    </p>
    <p>
        <input type="text" v-model.trim="msg">//去掉首尾的空格
        {
     {
     msg}}
    </p>
</div>
<script>
   new Vue({
     
        el: "#app",
        data: {
     
            msg: "sad",
            isBool: true
        }
    })
</script>

day01加油