Vue系列入门教程(2)——第一个Vue实例

Web前端 潘老师 2个月前 (09-02) 420 ℃ (0) 扫码查看

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项目(普通模式)
Vue系列入门教程(2)——第一个Vue实例
2、我们可以看下创建好的项目目录结构和内容,发现index.html中已经帮我们引入了对应的vue文件,当然你也可以自己去官网下载你想要的版本拿过来用。
Vue系列入门教程(2)——第一个Vue实例
3、我们在index.htmlbody标签中,写如下代码:

<div id="app">
    <h1>{{title}}</h1>
</div>
<script>
    //创建Vue实例
    var app = new Vue({
        el: "#app",
        data: {
            title:"商品管理"
        }
    })
</script>

4、选择预览安装内置浏览器可以查看(也可以选择菜单运行->运行到浏览器->chrome),发现数据显示到了对应的位置。
Vue系列入门教程(2)——第一个Vue实例

1、Vue实例创建语法:new Vue({....})
2、配置对象中的部分内容会被提取到实例中:

  • data
  • props
  • methods
  • computed

1、让Vue实例控制网页中某个区域的过程,称之为挂载

2、挂载的方式有两种
1)通过el:"css选择器"进行配置
2)通过vue实例.$mount("css选择器")进行配置

1、被vue实例控制的页面片段称之为模板,比如上述案例的模板就是<{{title}}h1></h1>

2、模板的作用是什么?
为了提高渲染效率,vue会把模板编译成为虚拟DOM树(VNode) ,然后再对比更新生成真实的DOM
Vue系列入门教程(2)——第一个Vue实例
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实例的生命周期图示(重点关注红色部分):
Vue系列入门教程(2)——第一个Vue实例
钩子函数说明(重点关注2.0):
Vue系列入门教程(2)——第一个Vue实例
比如 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。
Vue系列入门教程(2)——第一个Vue实例

注意:不要在选项 property 或回调上使用箭头函数,比如 created: () => console.log(this.a) vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this,this 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefinedUncaught TypeError: this.myMethod is not a function 之类的错误。


版权声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系潘老师进行处理。
喜欢 (9)
请潘老师喝杯Coffee吧!】
分享 (0)
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填【保密】)
  • 网址