您的位置: 首页  >  文章  >  VUE入门到实战--Vue实例和模板语法

VUE入门到实战--Vue实例和模板语法

分类: 文章 • 2025-01-07 14:24:58

1、Vue实例

1、每个 Vue 应用都是通过用 Vue å‡½æ•°åˆ›å»ºä¸€ä¸ªæ–°çš„ Vue 实例开始的：比如我们在下面这个例子中如果使用浏览器打开，我们在控制台输入vm.$data、vm.$el都能打印出响应的内容。在一个Vue实例中，像el，data，methods....还有很多，都叫做Vue的实例属性。这些实例属性都能通过 { 实例名.$实例属性名 }这种方式得到。

2、实际上每个组件都是一个Vue的实例，或者说一个Vue的项目都是由一个个的Vue的实例模块组成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div @click="handleBtnClick">
            {{message}}
        </div>
        <item></item>
    </div>
    <script>
        Vue.component("item", {
            template: "<div> hello world </div>",
        })
        var vm = new Vue({
            el: '#root',
            data: {
                message:'hello world',
            },
            methods: {
                handleBtnClick: function() {
                    alert('hello');
                }
            }
        })
    </script>
</body>
</html>

2、Vue的生命周期和生命周期钩子

1、什么是生命周期函数：Vue实例在某一个时间点会自动执行的函数。

2、当我们创建一个Vue的实例的时候，也就是使用new Vue的时候，Vue会自动的去初始化事件和生命周期。在这个时间段会执行的生命周期函数是beforeCreate。

3、接着会进行一些外部注入和双向绑定的一些操作后，基本Vue实例的初始化都完成了，这个时间点上会有个生命周期函数会自动执行 created。

4、接着会询问一个条件说：有没有el这个选项，然后再问你有没有template这个选项。如果没有的话：Complie el‘s outerHTML  as template（把el外层的html作为模板：什么意思？就是说从el中找到那个Vue接管的DOM，把那部分内部或者整体作为当前模板,下面这个例子中就找到id为app的div，将<div id="app">hello world</div>整个作为模板来进行渲染。所以说：现在就可以稍微理解一下为什么是由一个个Vue的组件构成，写的DOM也不过是把Vue中的模板属性拿到了外面而已）。总结一下：有template就渲染template，没有就渲染外部监管的DOM。

<div id="app">hello world</div>
...

var app=new Vue({
    el:'#app',
})
与下面是等价的：
<div id="app"></div>
...

var app=new Vue({
    el:'#app',
    template:"<div>hello world</div>"
})

5、在页面渲染之前，也就是数据和模板想结合即将挂载在页面的之前的一瞬间，会自动执行一个生命周期函数 beforeMount。

6、在beforeMount执行后，数据和模板结合生成的Vue实例中的DOM元素就会挂载到页面上，在下面的例子中就是hello world被显示在页面上面后，又会自动执行一个生命周期函数 mounted。你能在下面的例子中看到在beforeMount执行的时候，id为app的DOM元素还什么都没有，执行mounted的之后，hello world已经出来了。

7、而数据更新和销毁的4个生命周期函数必须在数据更新和执行销毁函数xx.destroy()才会执行。我们下面的例子中有测试用例。 

8、另外除了我们将的8个生命周期函数外，还有3个生命周期函数，我们在后面会讲到。

VUE入门到实战--Vue实例和模板语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue生命周期钩子</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        var vm=new Vue({
            el:'#app',
            template:"<div @click='handleBtnDestory'>{{content}}</div>",
            data:{
                content:'hello world',
            },
            methods:{
                handleBtnDestory:function() {
                    //this.$destroy(); //用来测试销毁destroy的生命周期函数
                    this.content="I'm changed";//用来测试updata的生命周期函数
                }
            },
            beforeCreate:function() {
                console.log("beforeCreate");
            },
            created:function() {
                console.log("created");
            },
            beforeMount:function() {
                console.log(this.$el); //输出结果是<div id="app"></div>
                console.log("beforeMount");
            },
            mounted:function() {
                console.log(this.$el); //输出结果是<div id="app">hello world</div>
                console.log("mounted");
            },
            beforeDestroy:function() {
                console.log("beforeDestroy");
            },
            destroyed:function() {
                console.log("destroyed");
            },
            beforeUpdate:function() {
                console.log("beforeUpdate");
            },
            updated:function() {
                console.log("updated");
            }
        })
    </script>
</body>
</html>

3、模板语法

1、首先要明确的就是我们在指令后面跟的不是字符串，虽然是用引号包裹的，但指令后面跟着的是个JS表达式。

2、插值表达式、v-text、v-html之间的区别：插值表达式和v-text其实一样，对内容都是进行转义，显示原本的字符串内容，而v-html是对内容进行解析，如果内容是html表达式，按照html的方法展示。

3、对于插值表达式和v-text都是一个JS表达式，所以可以写成下面这样。而v-html就要分情况，如果是内容是html表达式，就不能再v-html后面的引号中写成JS表达式了，写了也没有效果，如下例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">    <!--插值表达式-->
        {{name + 'Lee'}}
        <div v-text="name + 'Lee'"></div><!--Vue指令插值，让div中的innerHtml的内容变成name的内容，会显示<h1>dell</h1>这个字符串-->
        <div v-html="name + 'Lee'"></div><!--Vue指令插值，解析name中的内容,如下所示会显示h1标签类型的dell-->
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                name:"<h1>dell</h1>",
            },
        })
    </script>
</body>
</html>

可以在浏览器中看到效果：分别是插值，v-text，v-html：

VUE入门到实战--Vue实例和模板语法

 

相关推荐