vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
#课程目标
- 了解 vue 框架的特点
- 掌握创建 vue 实例
- 掌握 data 用法及特点
- 掌握 vue 基本指令的用法
- 掌握 methods 用法
#知识点
-
直接用
<script>
引入,Vue 会被注册为一个全局变量。 -
创建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>
运行结果如下:
-
data对象中定义的属性是‘响应式’的,属性值发生改变页面也会改变, 演示效果1
-
指令: (1)双大括号{{}},插值语法。可以写js表达式和三目运算
(2)v-text\v-html
(2)条件渲染 v-show,根据表达式之真假值,切换元素的 display CSS 属性。
(4)绑定动态属性 v-bind,简写
:
(6)在表单控件或者组件上创建双向绑定 v-model
(7)绑定事件监听器 v-on,简写
@
-
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的区别
#授课思路
#案例和作业
-
用 vue 面向数据的编程思想实现下图,并且实现tab切换。
-
v-model 练习