1.想让Vue工作,就必须创建一个 vue实例,且要传入一个配置对象 el data ;
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的vue语法 ;
3.root容器里的代码称为[vue模板]
4.vue实例和容器是一一对应的 的数据发生变化,那么模板中用到该数据的地方也会自动更新
5.真实开发中只有一个vue实例,并且会配合着组件一起使用
6.{{xxx}} 中的xxx是js表达式 ,且xxx可以自动读取到data中的所有属性;
7. 一旦data 中的数据发生变化,那么该模板中用到该数据的地方也会自动更新;
注意区分js表达式和js代码(语句)
1.一个表达式会产生一个值,可以放在任何一个需要值得地方
(1).a
(2)a+b
(3)demo(1)函数调用表达式
(4)x===y ? 'a' :'b' 三元表达式 三目表达式
2.js代码 语句
(1) if(){} 控制走不走
(2)for(){} 控制走几次
1 vue 是什么
3 简介型的javascript框架 个人开发 (刘雨溪)
4
5 特点:mvvm m=mvc module 模型 v=view 视图 c=controller 控制器
6 mvvm m=mvc module 模型 v=view 视图 vm (视图与数据之间的传递)
7 vue1 双向数据绑定 vue2 单向数据流
8 单页面应用
13 v-model 数据绑定
14 data 返回对象用 return
16 v-for 循环 格式 v-for="字段名 in(of) 数组json"
18 v-show 显示 隐藏 传递的值为布尔值 true false 默认为false20 v-if 显示与隐藏 和v-show对比的区别 就是是否删除dom节点 默认值为false
22 v-else-if 必须和v-if连用
24 v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
26 v-bind 动态绑定 作用: 及时对页面的数据进行更改
30 v-on 绑定事件 函数必须写在methods里面
31 @click 快捷方法
33 v-text 解析文本
35 v-html 解析html标签
37 v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三目型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'
39 v-once 进入页面时 只渲染一次 不在进行渲染
41 v-cloak 防止闪烁
43 v-pre 把标签内部的元素原位输出