Mr.Zhang
Articles
10
Tags
10
Categories
3
首页
历程
标签
分类
友链
关于我
Vue学习笔记
|前端
Word count: 2.3k|Reading time: 10 min|Post View:

最近学习了Vue，Vue的出现简化 了很多代码步骤，Vue最强大的就是双向数据绑定。

什么是Vue？

sss

Vue是一套用于构建用户界面的渐进式框架。它的核心是视图层，它在前端MVVM 中的角色是 VM .
它是调度者，它分割了M和V。如果V（视图层）想要取数据，那么它会通过VM 到 M 层去取数据；存储数据，VM会将V层的数据存储到M层。
VM是M层和V层沟通的桥梁

Vue主要是以Vue内置命令驱动，这是我根据Vue官方总结的一份学习资料，特别适合新手入门学习

声明式渲染

1
2
3
4
5
// HTML
 <div id="fade">
       <p>{{msg}}</p>
       <h1>{{hh}}</h1>
 </div>
1
2
3
4
5
6
7
8
9
10
11
<script>
    var ss = new Vue({
        el: '#fade',     // el 控制对象的区域
        data: {			// data是渲染的数据
            msg: '测试Vue使用',
            hh: '测试踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩'
        }
    })
 </script>
 
 小结：声明式渲染主要是 在Vue对象 data中指定属性，然后在HTML代码中使用{{data中的属性}}，这样就达到了渲染，是不是很简单。

条件于循环

v-if 条件的使用

1
2
3
4
5
6
<div id="fade">
<input type="button" value="隐藏" @click="flag!=flag">
<p v-if="flag">测试显示</p>  // 如果flag在data中定义false，则那么它就不会显示
<p v-show="flag">测试显示</p>

</div>

1
2
3
4
5
6
7
8
<script>
    var sc = new Vue({
        el:"#fade",
        data:{
            flag:true   //指定v-if 如何显示
        }
    })
</script>

v-for 循环的使用

1
2
3
4
5
6
7
8
9
10
<div id="fade">
      id:<input type="text" v-model="id">name:<input type="text" v-model="name"><input type="button" value="添加" @click="add">
      <p v-for="item in list" :key="item.id"> <input type="checkbox" >id:{{item.id}}-------name:{{item.name}} </p>
      // v-for="变量 in  数组/对象"
      //然后在想插入的标签中 {{item.数组的属性}}  -----这样就把数组中的数据取到了
      //:key的作用是：记录当前数据状态，不会被覆盖--------它常于v-for搭配使用


	key 管理可复用的元素
 </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
    var ss = new Vue({
        el:"#fade",
        data:{
            id:"",
            name:"",
            list:[
                {id: 1 , name:"张三"},
                {id: 2 , name:"李四"},
                {id: 3 , name:"王五"},
                {id: 4 , name:"超人"},
                {id: 5 , name:"小明"}
            ],
        
        }  ,
        methods:{
            add(){
                // 添加一行
                //this.list.push({id:this.id,name:this.name}) 在数组末尾追加一个对象
                this.list.unshift({id:this.id,name:this.name})
            }
        }
    });
</script>
小结：v-for循环时,key属性只能是number或者 string
使用key时,必须用  v-bind 绑定指定key的值, 它用于保存当前选中

组件应用构建

什么是组件？

Vue官方定义：
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
简单的说 组件：它就是一个页面的一小部分，它有特殊功能供用户使用（计算求和，查询火车票…），它可以根据开发者自定义开发功能供用户方便使用。

组件的注册以及使用
全局注册

1
2
3
4
5
6
7
Vue.component('item-ss',{// item-ss 是自己定义的组件标签
        props:['phone'], //给组件添加一个新的属性
        template:'<li>{{phone.name}}-----{{phone.prise}}</li>'// template是按什么形式显示在页面
    })
var ss = new Vue({
        el:'#fade',
    })

1
2
3
4
5
6
7
8
<div id="fade">
	//使用在组件中自定义的组件
	 // 以下这步骤是：  先遍历shop数组   然后将遍历后的item  绑定在组件添加的新的组件上， 最后它会按template中的内容输出
    <item-ss  v-for="item in shop" :phone="item"></item-ss>
</div>


小结：全局注册： 它是在Vue对象外注册

局部注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var aa = {
        props:['phone'],
        template:'<li>{{phone.name}}-----{{phone.prise}}</li>'// template是按什么形式显示在页面
    };
var ss = new Vue({
        el:'#fade',
        data:{
            boo:false,
            content:"",
            shop:[
                {name:"Iphone8",prise:5000},
                {name:"Iphone9",prise:7000},
                {name:"IphoneX MAX",prise:10000},
            ]
        },
        // 这部分要 components
        components:{
            'phone-item':aa
            //组件名(标签名)：用到的js对象

            // 这个phone-item的作用域只会在Vue实例中生效
        }
 
    })



小结： 局部注册: 它是在Vue对象内部定义

计算属性和侦听器

计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
    Vue.component('item-ss',{// item-ss 是自己定义的组件标签
        props:['phone'], //给组件添加一个新的属性
        template:'<li>{{phone.name}}-----{{phone.prise}}</li>'// template是按什么形式显示在页面
    })
    var ss = new Vue({
        el:'#fade',
        data:{
            boo:false,
            prise:15000
        },
        computed:{
            half_Off:function(){
                return this.prise*7
            },
            ChinaRmb:function(){
                return (this.half_Off)/3
            }
            
        }
 
    })
//计算属性（computed）：它是处理发杂的逻辑

</script>

什么是计算属性（computed）？

1
2

处理一些发杂的逻辑时，内容就放在computed中

侦听属性

1
2
3
4
5
6
7
watch:{
    price:function(){
        //只要price值变了，就会执行watch下的相应操作
        this.half_Off = this.price*7
        this.ChinaRmb = this.half_Off/4
    }
}

什么是侦听属性（watch）？

1
2

当侦听的属性发生了变化，那么watch中的内容就发生变化

class与Style绑定

class使用的几种方法

1
2
3
4
5
6
7
8
9
10
<div id="fade">
      <!-- 通过数组方式添加样式   【‘样式名’】 --> 这里的样式名是提前在CSS中定义好的， 使用v-bind=class绑定使用
      <h1 :class="['size', 'color',boo?'big':'weight']">添加样式</h1>
      <hr>
      <!-- 通过添加对象的方式进行判断  {‘样式名’,布尔值变量} -->
      <h1 :class="[ 'color',{'big':boo}]">添加样式</h1>
      <hr>
      <!-- 直接通过对象改变属性  {属性名:布尔值} -->
      <h1 :class="{color:true, size:true}">测试直接使用对象该样式</h1>
  </div>

1
2
3
4
5
6
7
8
9
<script>
    var ss = new Vue({
        el: '#fade',
        data:{
            boo:true
        }

    })
</script>

style使用几种方法

1
2
3
4
5
6
7
<div id="fade">
           <!-- 通过往style中传入对象改变样式    缺点不能传多个对象 -->
           <h3 :style="ss">测试行十四说水水</h3>
           <hr>
           <!-- 通过往style中传入数组，在数组中可以放多个对象 -->
           <h3 :style="[yy , dd]">测试行水</h3>
   </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
        var ss = new Vue({
            el: '#fade',
            data:{
                ss:{color:'red','font-size':"50px"},
                dd:{"font-weight":900},
                yy:{color:'blue','font-size':"30px"},
            }
    
        })
    
    
    </script>

条件渲染（if，if-else，if-else if，else）

1
2
3
4
5
6
7
8
9
<div id="fade">
  <h2>考试成绩</h2>
  <h1>{{msg}}🍗🍗🍗🍗🍗</h1>
  <h1 v-if="msg == 0"> 请点击查询成绩</h1>
  <h1 v-else-if="msg<60">孩子考的不错，会家要红包去吧</h1>
  <h1 v-else-if="msg<80&&msg>60">孩子，还可以，继续努力</h1>
  <h1 v-else>孩子还念啥📕啊，快上班去吧，学霸</h1>
  <button @click='find'>查询成绩</button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    var ss = new Vue({
        el: '#fade',
        data:{
            msg:0
        },
        methods:{
            find:function(){
                return this.msg=Math.round(Math.random()*100)
            }  
        }
    })


</script>

列表的渲染

v-for 渲染列表的使用

1
2
3
4
5
6
7
8

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
 	1.index 是 Object列表的索引
 	2.key  是 Object列表的属性
 	3.value 是 Object中key的值
  
</div>

表单数据绑定（v-model）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="fade">
        <h2>你玩过哪些游戏</h2>
        <input type="radio"  v-model="hobby"  value="穿越火线">
        <label for="穿越火线">穿越火线</label><br>
        <input type="radio" v-model="hobby" value="QQ飞车">
        <label for="QQ飞车">QQ飞车</label><br>
        <input type="radio" v-model="hobby" value="战地之王">
        <label for="战地之王">战地之王</label><br>
        <h2>你的性别是</h2>
        <input type="radio" v-model="sex" value="男">
        <label for="QQ飞车">男</label><br>
        <input type="radio" v-model="sex" value="女">
        <label for="战地之王">女</label><br>
        <h2>你的职业是</h2>
        <input type="radio" v-model="profession"value="学生">
        <label for="QQ飞车">学生</label><br>
        <input type="radio" v-model="profession" value="码农">
        <label for="战地之王">码农</label><br> 


        <hr>
        <p>你的性别是：{{sex}}</p>
        <p>你的爱好是：{{hobby}}</p>
        <p>你的职业是：{{profession}}</p>
      
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    var ss = new Vue({
        el:'#fade',
        data:{
          hobby:"",
          sex:"",
          profession:""
        },
 
    })

//单选框：radio上 绑定value值，  当选中该值  ， 存入 data中定义的属性

</script>
1
2
以上是Vue的基础部分，进阶部分在接下来的时间会去学习！
相信你可以很容易看懂这些例子吧，Vue使用真的很方便！

点击即可找到我的个人博客或者关注我CSDN博客，我都会更新博客

Author: Small Xin
Link: http://yoursite.com/2018/11/25/Vue/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
Vue
Donate
  • 微信
  • 支付寶
繁