1、速写属性
var name = "xiaoming"; var age = "20"; //对象,属性:属性值 var obj = { name:name, age:age } //可以简写为如下,与上面效果一样 var obj2 = { name, age } console.log(obj); console.log(obj2);
2、速写方法
//传统写法 var obj = { name: "xiaoming", sayName: function(){ console.log(this.name); } } obj.sayName(); //可以简写为如下: var obj2 = { name: "xiaoming", sayName(){ console.log(this.name); } } obj2.sayName();
3、箭头函数
1)this绑定
//传统写法 var obj = { name: "xiaozhang", sayName: function(){ setInterval(function(){ console.log(this.name); },1000); } } //调用会发现每秒钟打印的都是undefined,this访问不到name obj.sayName(); //箭头函写法 var obj2 = { name: "xiaozhang", sayName: function(){ setInterval(()=>{ console.log(this.name); },1000); } } //调用会发现this可以访问到name,这也是箭头函数的好处 obj2.sayName();
2)简化方法定义
//传统写法 var add = function(a,b){ return a+b; } //箭头函数 var add = (a,b) => { return a+b; } //如果只有一条返回语句,可以再简化 var add = (a,b) => a+b; //如果只有一个参数,可再简化 var db = a => a*2;
4、模板字符串
//模板字符串,使用反引号 var str = `hello java`; //可以随意换行 var str2 = `hello java`; //可以使用${JS表达式}获取数据,直接拼接字符串 var name = "panziye"; var age = 20; var str3 = `我的姓名${name},我的年龄${age}`; console.log(str); console.log(str2); console.log(str3);
1、打开HbuildX,选择文件->新建->项目->普通项目
在弹窗中填写项目名称和项目保存目录,选择Vue项目(普通模式)
2、我们可以看下创建好的项目目录结构和内容,发现index.html中已经帮我们引入了对应的vue文件,当然你也可以自己去官网下载你想要的版本拿过来用。
3、我们在index.html
的body
标签中,写如下代码:
<div id="app"> <h1>{{title}}</h1> </div> <script> //创建Vue实例 var app = new Vue({ el: "#app", data: { title:"商品管理" } }) </script>
4、选择预览
安装内置浏览器可以查看(也可以选择菜单运行->运行到浏览器->chrome
),发现数据显示到了对应的位置。
1、Vue实例创建语法:new Vue({....})
2、配置对象中的部分内容会被提取到实例中:
- data
- props
- methods
- computed
1、让Vue实例控制网页中某个区域的过程,称之为挂载
2、挂载的方式有两种:
1)通过el:"css选择器"
进行配置
2)通过vue实例.$mount("css选择器")
进行配置
1、被vue实例控制的页面片段称之为模板,比如上述案例的模板就是:
<div id="app"> <h1>{{title}}</h1> </div>
2、模板的作用是什么?
为了提高渲染效率,vue会把模板编译成为虚拟DOM树(VNode) ,然后再对比更新生成真实的DOM
3、模板书写到哪?
- 在挂载的元素内部直接书写(上面的案例)
- 在template配置中书写
- 在render配置中用函数创建(了解即可)
1)template演示如下代码:
<div id="app"></div> <script> //创建Vue实例 var app = new Vue({ template:`<h1>{{title}}</h1>`, data: { title:"商品管理" } }); app.$mount("#app"); </script>
2)render演示如下代码:
<div id="app"></div> <script> //创建Vue实例 var app = new Vue({ //render参数名称随意 render(newElement){ return newElement("h1",this.title) }, data: { title:"商品管理" } }); app.$mount("#app"); </script>
以上两种方法我们发现,生成的真实DOM中原先的<div id="app"></div>
被替换了。
4、模板中写什么?
1)静态内容
2)插值: {{JS表达式}}
3)常用指令(后面再演示):
1.
v-html
:绑定元素的 innerHTML
2.v-text
:绑定元素的 innerText
3.v-bind:属性名
:绑定属性,可以简化为:属性名
4.v-on:事件名
: 绑定事件,可以简化为@事件名
5.v-if
: 判断元素是否需要渲染
6.v-else-if
: 与v-if
合用
7.v-else
: 与v-if
合用
8.v-show
: 判断元素是否应该显示
9.v-for
: 用于循环生成元素
10.v-bind:key
: 用于帮助在重新渲染时元素的比对,通常和v- for配合使用,以提高渲染效率
11.v-model
: 语法糖,用于实现双向绑定,实际上,是自动绑定了value属性值,和注册了input事件
5、模板中的代码环境
模板中所有的JS代码,它的环境均为vue实例,例如{{title}},得到的结果相当于是vue实例. title
6、配置对象说明
- data:数据
- template: 字符串,配置模板(注意配置的模板只能有一个根元素)
- el:配置挂载的区域
- methods :配置方法
- computed: 配置计算属性
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
Vue实例的生命周期图示(重点关注红色部分):
钩子函数说明(重点关注2.0):
比如 created 钩子可以用来在一个实例被创建之后执行代码:
<div id="app"> <h1>{{num}}</h1> </div> <script> var app = new Vue({ el:"#app", data:{ num:0 }, // `this` 指向 vue 实例 created() { alert(this.num); this.num++; } }); </script>
测试时你会发现DOM还没生成,弹窗就出来了,数据为0,确定后,数据显示,值为1。
created: () => console.log(this.a)
或 vm.$watch('a', newValue => this.myMethod())
。因为箭头函数并没有 this,this 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefined
或 Uncaught TypeError: this.myMethod is not a function
之类的错误。