Vue的根实例

最新推荐文章于 2024-07-25 09:24:40 发布

啊唯11

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量734

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_66059613/article/details/126914101

版权

文本插值

个例子尽管非常简单，充分体系了Vue.js的使用方法，首先需要引入vue.js文件，如何HTML内容部分的写法就像普通网页一样，只是在某些需要动态生成的部分，用双大括号括起来一些变量，这些变量刚好和后面的JavaScrict代码中声明的对象一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue的初体验/vue.js"></script>
</head>
<body>
    <div id="app">
    <p>用户您好</p>
    <ul>
<li>姓名:{{name}}</li>
<li>城市:{{city}}</li>

    </ul>
    </div>
    <script>
        let user = {
            name : 'Change',
            city: Benjing,
        };
        let vm =new Vue({
            el:'#app',
            data:user
        })
    </script>
</body>
</html>

这里要注意参数对象有一个名为“el”的属性，其值恰好是我们需要处理的HTML元素的根节点id，即“#app”

其次，参数对象中定义了data属性，它的值是一个名为user的对象，这个对象就是业务模型，并且在代码中已经声明好了，

  <div id="app">
    <p>用户您好</p>
    <ul>
<li>姓名:{{name}}</li>
<li>城市:{{city}}</li>

    </ul>
    </div>

用双大括号括起来的name和city，正好对应data对象的两个属性。渲染页面的时候会自动的将{{name}}和{{city}}替换成data.name和data.city。这个过程被称为文本插值

效果如图：

方法属性

在传入 VueO)构造函数的对象中，除了 el 和 da ta之外，还可以包括methods属性，
里面可以定义多个方法(或者叫作函数)。例如，倡假设我们希望在页面上根据用户的姓知识点讲解
名和所在城市，显示一条欢迎语:“欢迎来自某地的某人”，效果如图 2.3 所示。添加sayHello()方法，其作用是将name 和 city插人一个模板字符串中，得到一条完整的句子，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue的初体验/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{sayHello()}}</p>
        <ul>
        <li>姓名:{{name}}</li>
        <li>城市:{{city}}</li>
        </ul>
    </div>
    <script>
        let user = {
            name:"change",
            city:"Beijing",
        };
        let vm =new Vue({
            el:"#app",
            data:user,
            methods:{
                sayHello(){
                    return'您好,欢迎来自${this.city}的${this.name}!'
                }
            }
        })
    </script>
</body>
</html>

效果如图：

下面我们深入理解一下Vuejs 的“响应式系统”(reactivitysystem)，它是Vue.js 实现很多“编程魔法”的关键。
当一个Vue实例被创建时，data对象中的所有属性都会被自动添加到Vuejs的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的属性值。
观察以下代码，请仔细理解注释中的说明 :

//定义一个最简单的数据模型 
var model = { a: 1 }

//将该对象添加到一个Vue 实例中 
var vm = new Vue({ data: model})

// Vue实例中的字段与data 中的字段一致
 vm.a == data.a // => true

// 修改Vue 实例中相应的字段，也会影响到 data 中的原始数据 
vm.a=2
console.log(data.a) // => 2

//同样，修改data中的字段，也会影响到Vue 实例中的数据 
data.a=3 vm.a // => 3

基于上面的说明，在 methods 中定义的方法内部都，可以使用this 指针引用data 中定义的属性，这
个this指针指向的就是Vue构造函数构建的对象，也就是上面代码中的vm 对象。Vuejs的响应式系
统会自动地将data中的所有属性添加到vm对象的屑属性中。

属性绑定

双大括号语法可以实现HTML元素的文本插值，但是，如果我们希望绑定的是 HTML元素的属性，就不能使用双大括号语法了，这时需要使用属性绑定指令。
仍以上面的用户信息页面为例，我们希望根据用户的性别对页面的样式进行区分数据模型中增加一个sex(性别)字段，代码如下，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
    <style>
        .male{
            background-color: pink;
        }
        .female{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="app">
        <p v-html= "sayHello()"></p>
        <ul  v-bind:class="sex">
        <li>姓名 : {{name}}</li>
        <li>城市 : {{city}}</li>
        </ul>
    </div>
    <script src="../vue的初体验/vue.js"></script>
    <script>
        let user = {
            name:"change",
            city:"Beijing",
            sex:"male"
          
        };
        let vm =new Vue({
            el:"#app",
            data:user,
            methods:{
                sayHello(){
                    return '您好,欢迎来自<b>${this.city}</b>的<b>${this.name}</b>!'
                }
            }
        })
    </script>
</body>
</html>

然后，在<style>标记部分增加两种 CSS样式类:male类显示浅蓝色背景，用于显示
男性 female类显示浅红色背景，用于显示女性用户

这其中主要是为ul元素属性绑定class属性，这里需要使用v-bind指令将class属性绑定到data中新增的sex字段上ew

插入HTML片段

前面介绍的双大括号语法，可以用来!句HTML元素中插入文本。但是，如果插入的不是单纯的文本内容，而是带有HTML结构，就要改用v-html指令了。
下面首先对sayHello()方法稍做修改，在字符串中加入一些 HTML标记，代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
    <style>
        .male{
            background-color: pink;
        }
        .female{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="app">
        <p v-html= "sayHello()"></p>
        <ul  v-bind:class="sex">
        <li > 姓名 : {{name}}</li>
        <li > 城市 : {{city}}</li>
        </ul>
    </div>
    <script src="../vue的初体验/vue.js"></script>
    <script>
        let user = {
            name:"change",
            city:"Beijing",
            sex:"male"
          
        };
        let vm =new Vue({
            el:"#app",
            data:user,
            methods:{
                sayHello(){
                    return '您好,欢迎来自<b>${this.city}</b>的<b>${this.name}</b>!'
                }
            }
        })
    </script>
</body>
</html>

效果如图