Vue 笔记11.22 Vue的响应式原理、Vue的常用指令、条件渲染和列表渲染、轮播图练习

课堂学习：Vue 渐进式 JavaScript框架 初步认识

下面是Vue的官方文档 不懂就看看

https://cn.vuejs.org/    

一、安装和使用

1.安装：

在   https://cn.vuejs.org/   中 找到学习——教程——安装 

里面有两个版本的Vue

开发版本和生产版本

开发版本：包含完整的警告和调试模式

生产版本：删除了警告，33.46KB min+gzip    是开发版本的压缩版体积更小

下载好后直接放到vscode打开的文件的同一目录下 是Vue.js 

2.使用：

使用Vue框架 需要先引入

 

    

    

    

以下代码可以关闭生产提示

第一步：

    

        

姓名：{{name}}

        

年龄：{{age}}

        

        修改姓名

        修改年龄

    

第二步：

// 第二步：创建一个Vue对象

        let vm = new Vue({

            // 绑定当前Vue对象操作的DOM容器

            el:'#app',

            //定义当前Vue对象管理的数据

            data:{

                name:'张三',

                age:20

            },

            //定义当前Vue对象管理的方法

            methods:{

                //修改姓名的方法

                updataName (){

                    this.name='啊发发'

                },

                //修改年龄的方法

                updataAge (){

                    this.age=30

                }

            }

二、理解什么是Vue的响应式原理：

原理：当代理对象监听到数据发生变化了，就会重新渲染页面 

以下代码用于帮助理解 复制到vscode中看比较好

    

三、Vue的常用指令：

           举个例子v-bind:value = '1+2' 它显示出来的是3 

           

            {{name}}

            

            

            {{age}}

            {{job}}

let vm = new Vue({

            el: '#app',

            //数据

            data: {

                name: '张三',

                age: 20,

                job: '程序员'

            },

            methods: {

                updataName(e) {

                    console.log(e) //接收的事件对象e里面有target属性 里面有value 

                    //获取文本框里的内容，更新数据  把name属性的值同步给当前input里的value

                    this.name = e.target.value  //获取当前元素的value值

                },

                updataAge(e) {

                    this.age = e.target.value

                },

                updataJob(e){

                    this.job = e.target.value

                }

            }

        })

四、条件渲染和列表渲染：

1.条件渲染

v-if=''

v-else-if=''

v-else='

这个score是在   Vue  的   data  中我们定义的属性 根据这个属性我们设定的值是多少来判断显示 优秀 良好 中等 合格 不合格中的一项

        =90'>优秀

        =80'>良好

        =70'>中等

        =60'>合格

        不合格

v-show 的值时布尔值 来判断是否显示和不显示 

v-show的方法  模板已经渲染成功，通过样式控制隐藏

v-if的方法 在满足条件是才会渲染页面 不满足的不会渲染

v-if 和 v-show 如何选择

            如果页面需要反复切换显示和隐藏，用v-show。

            如果页面中有很多模块需要隐藏，用户可能只对其中的某个模块感兴趣，用v-if，

            所有的模块首屏加载时，全部都不渲染，当用户选择指定的模块后，再渲染指定的模块。

2.列表渲染：

            

            {{index}}---{{item.id}}---{{item.name}}---{{item.price}}

            

            {{a}}

        

new Vue({

            el: '#app',

            //定义数据

            data: {

                score: 60,

                //添加一个是否显示属性 默认为false

                isShow: false,

                foods:[

                    {

                        id:1,

                        name:'薯片',

                        price:7.9

                    },

                    {

                        id:2,

                        name:'饼干',

                        price:17.9

                    },

                    {

                        id:3,

                        name:'巧克力',

                        price:27.9

                    },

                    {

                        id:4,

                        name:'面包',

                        price:11.9

                    }

                ]

            }

        })

五、轮播图练习：