vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

#课程目标

  1. 了解 vue 框架的特点
  2. 掌握创建 vue 实例
  3. 掌握 data 用法及特点
  4. 掌握 vue 基本指令的用法
  5. 掌握 methods 用法

#知识点

  1. 直接用 <script> 引入，Vue 会被注册为一个全局变量。 

  2. 创建vue实例，并将实例挂载到window上。

    <body>
    <div id='app'>
        <h1>{{msg}}</h1>
    </div>
    <script>
        // console.log(Vue)
        window.vm=new Vue({
            el:'#app',
            data:{
                msg:'hello world!'
            }
        })
    </script>
</body>
     

运行结果如下： 

  1. data对象中定义的属性是‘响应式’的，属性值发生改变页面也会改变， 演示效果1 

  2. 指令： （1）双大括号{{}},插值语法。可以写js表达式和三目运算

    （2）v-text\v-html

    （2）条件渲染 v-show,根据表达式之真假值，切换元素的 display CSS 属性。

    （4）绑定动态属性 v-bind，简写：

    （6）在表单控件或者组件上创建双向绑定 v-model

    （7）绑定事件监听器 v-on，简写@

  3. methods 定义方法

    <body>
    <div id='app'>
        <h1>{{msg}}</h1>
        <button @click='changeMsg'>改变</button>
    </div>
    <script>
        // console.log(Vue)
        window.vm=new Vue({
            el:'#app',
            data:{
                msg:'hello world!'
            },
            methods: {
                changeMsg(){
                this.msg='八维' 
                }
            },
        })
    </script>
</body>
     

效果展示 

思考：vue操作数据与传统的操作dom的区别

#授课思路

#案例和作业

  1. 用 vue 面向数据的编程思想实现下图，并且实现tab切换。

  2. v-model 练习

posted @ 2020-12-14 10:43  人心不古  阅读(86)  评论(0)  编辑  收藏  举报