韩国毛茸茸的丰满妇女

<strike id="j6ksu"></strike>
<th id="j6ksu"></th>
  1. <th id="j6ksu"></th>

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

    Web前端 潘老师 7个月前 (09-02) 1101 ℃ (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实例控制的页面片段称之为模板,比如上述案例的模板就是:

    <div id="app">
        <h1>{{title}}</h1>
    </div>
    

    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 之类的错误。


    版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系潘老师进行处理。
    喜欢 (15)
    请潘老师喝杯Coffee吧!】
    分享 (0)

    您必须 微信登录 才能发表评论!

    韩国毛茸茸的丰满妇女