Vue学习笔记（二）：Vue实例与指令

1 创建Vue实例¶

每一个Vue应用都要通过Vue实例实现，实例化Vue语法格式如下：

var vm = new Vue({
  // 选项
})

接下来，通过一个代码段说明Vue构造器有哪些基本内容：

<!--第一步：创建文件夹及html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门之Helloworld</title>
    <!--第二步：引入Vue库，此处引入的是本地的vue.js文件-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--第三步:创建一个Div-->
    <div id="app">
        <!--Vue的模板的绑定数据的方法，用两对花括号进行绑定Vue中的数据对象的属性 -->
        <h1>{{message}}</h1>
    </div>

    <!--第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。-->
    <script type="text/javascript">
        var app=new Vue({ // 创建Vue对象，Vue的核心对象。
            el:'#app', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{    // data: 是Vue对象中绑定的数据
                message:'Hello Vue!' // message 自定义的数据
            }
        })
    </script>
</body>
</html>

上述示例中是在创建Vue实例时与div容器进行挂载，这是一种方法，还有一种方法是在完成实例化之后，通过Vue实例的“$mount()”内置方法挂载到容器。

<script type="text/javascript">
    var app=new Vue({ // 创建Vue对象，Vue的核心对象。
        data:{    // data: 是Vue对象中绑定的数据
            message:'Hello Vue!' // message 自定义的数据
        }
    });

    app.$mount('#app');  // 挂载到容器 
</script>

在上述代码实例汇总，我们创建了一个Vue实例（app），并将其挂载到div的id属性将其挂载到对应的div上，这里需要注意，Vue实例与容器时一一对应的关系，即一个Vue实例只能挂载到一个容器，一个容器也只能挂载一个Vue实例。

2 模板语法¶

Vue模板语法分为两大类：插值语法和指令语法。

2.1 插值语法¶

插值语法在上文中已经见过了，在第1章节中使用的形如“{{ message }}”，使用双花括号将内容进行包裹的方式就是插值语法，这里所说的内容可以是js变量、常量、表达式和js代码（数值运算、方法调用、三目运算符，甚至是条件判断和for循环）。通过这种插值的方式，Vue中数据将可以在页面中进行显示，且当Vue属性被修改时，页面中显示内容也将随之变化。

<div id="app">
    <h2>插值语法实例1——显示Vue属性：{{ message }}</h2>
    <h2>插值语法实例2——调用js方法：{{ new Date() }}</h2>
</div>
<script type="text/javascript">
    new Vue({ 
        el:'#app', 
        data:{    
            message:'Hello Vue!' 
        }
    })
</script>

2.2 指令语法¶

Vue中指令语法有很多，都是以“v-”开头，例如v-bind、v-model，这类语法多用于解析标签（包括标签属性、标签体内容、绑定事件等），以v-bind绑定a标签href属性为例，绑定方法为：v-bind:href="xxx"，或简写为：:href="xxx"，这里的xxx与上文插值语法中的message一样，可以是Vue实例data中所有属性，也可以是js表达式。

<div id="app">
    <!-- v-bind 绑定标签属性 -->
    <a v-bind:href="school.url.toUpperCase()">点我跳转到{{school.name}}</a><br>
    <!-- 简写形式-->
    <a :href="school.url" >点我跳转到{{school.name}}</a>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el:'#app',
        data:{
            school:{
                name:'百度',
                url:'http://www.baidu.com',
            }
        }
    })
</script>

3 数据绑定¶

Vue中，数据绑定分为单相绑定和双向绑定。

3.1 单向绑定：v-bind¶

单向绑定是指数据只能从data流向页面，用v-bind实现，大多用来绑定不可直接从页面上进行更改的标签属性上，当Vue中data内属性值发现变化，页面也将发生变化，但是页面对应内容发生变化时，data内对应的属性不会发生修改。v-bind在上文讲解指令语法时已经通过示例说明，这里不再举例。

3.2 双向绑定：v-model¶

双向绑定一般用v-model实现，数据不仅能够从data流向页面，也能从页面流向data，也就是说，当页面中对应的内容发生改变是，vue中该属性值将发生改变，当Vue中属性值发生改变是，页面内容也将随之变化。双向绑定一般都用在表单类元素上，例如input、textarea、select、checkbox、radio等。v-model以v-model:value="xxx"的形式，将标签的value属性与data的xxx属性进行双向绑定，也可以简写成v-model="name"的形式。

（1）input

<div id="app">
    单向数据绑定v-bind：<input type="text" v-bind:value="name"><br/>
    单向数据绑定v-bind简写：<input type="text" :value="name"><br/>
    双向数据绑定v-model：<input type="text" v-model:value="name"><br/>
    双向数据绑定v-model简写：<input type="text" v-model="name"><br/>

    <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
    <!-- <h2 v-model:x="name">你好啊</h2> -->
</div>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el:'#app',
        data:{
            name:'学习内容Vue'
        }
    })
</script>

（2）textarea texttarea标签的绑定方式和input中text的绑定方式一样：

<textarea  cols="30" rows="10" v-model="message"></textarea>

（3）checkbox

对于checkbox，由于可以多选，所以Vue中绑定的属性需以列表形式存在，所有在前段页面勾选的值，将保存到列表中。

<body>
    <div id="app">
        <input type="checkbox" id="first" value="1" v-model="status">
        <label>Python</label><br>
        <input type="checkbox" id="second" value="2" v-model="status">
        <label>Java</label><br>
        <input type="checkbox" id="second" value="3" v-model="status">
        <label>C</label><br>
        <div>熟悉的编程语言：{{status}}</div>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el:'#app',
        data:{
            status:[]
        }
    })
</script>

（4）radio

<body>
    <div id="app">
        <input type="radio" value="男" v-model="gender">
        <label >男</label><br>
        <input type="radio" value="女" v-model="gender">
        <label >女</label>
        <div>性别：{{gender}}</div>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el:'#app',
        data:{
            gender:'男'
        }
    })
</script>

（5）select 对于select，Vue绑定的是selected属性，可以再每个option中指定value，那么选中option的value将赋值给Vue实例对应属性，如果option没有设置value值，那么，option的text值将赋值给Vue实例对应属性。

<body>
    <div id="app">
        <select v-model="selected">
            <option disabled value="">最熟悉的编程语言</option>
            <option>Python</option>
            <option>Java</option>
            <option>C</option>
        </select>
        <div>最熟悉的编程语言: {{ selected }}</div>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el:'#app',
        data:{
            selected:''
        }
    })
</script>

4 其他内部指令¶

4.1 v-if 、v-else、 v-show、v-else-if¶

（1）v-if

<body>
    <h1 id="app" v-if="isVue">Hello Vue!</h1>  <!-- 当isVue为false时，此div盒子不会显示 -->
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el:'#app',
        data:{
            isVue: false
        }
    })
</script>

（2）v-else

<body>
    <h1 id="app" v-if="isVue">Hello Vue!</h1>  
    <h1 v-else>Not Vue!</h1>  <!-- 当isVue为false时，此div盒子将会显示 -->
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el:'#app',
        data:{
            isVue: false
        }
    })
</script>

（3）v-else-if

<body>
    <div id="app">
        <h1 v-if="lang=== 'Python'">Hello Python!</h1>  
        <h1 v-else-if="lang=== 'Java'">Hello Java!</h1>  
        <h1 v-else-if="lang=== 'C'">Hello C!</h1>    <!-- lang值为‘C’，此div盒子将会显示 -->
        <h1 v-else>Other language!</h1>  
        <h1 v-else>Not Vue!</h1>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el:'#app',
        data:{
            lang: 'C'
        }
    })
</script>

（4）v-show

<body>
    <div id="app">
        <h1 v-show="isVue">Hello Vue!</h1> <!-- 当isVue为true时，此div盒子才会显示 -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el:'#app',
        data:{
            isVue: false
        }
    })
</script>

v-if与v-show的区别:

v-if：在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，开销较高，在运行时条件很少改变时使用。
v-show：调整css dispaly属性，开销较小，在常频繁地切换时使用。

4.2 v-for¶

（1）基本用法

<body>
    <div id="app">
        <ul>
            <li v-for="lang in languages">
                Hello, {{lang}}!
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el:'#app',
        data:{
            languages: ['Python', 'Java', 'PHP', 'C']
        }
    })
</script>

（2）对象遍历

参数：第一个为值，第二个为键名，第三个为索引

<body>
    <div id="app">
        <ul>
            <li v-for="(value, key, index) in person">
                {{index}}. {{key}} : {{value}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el:'#app',
        data:{
            person: {
                name: '张三',
                age: 18,
                gender: '男'
            }
        }
    })
</script>

4.3 v-text 、v-html¶

（1）v-text {{xxx}}取值有个弊端，当网速很慢或javascript出错时，会在页面显示{{xxx}}，Vue提供的v-text可以解决这个问题.

<div>{{ message }}</div>
<!-- 和下面的一样 -->
<div v-text="message"></div>

（2）v-html 用于输出html代码：

<span v-html="msgHtml"></span>

4.4 v-once¶

只显示DOM第一次渲染的值，以后不改变了.

<div v-once>第一次绑定的值：{{message}}</div>

posted @ 2022-02-23 14:14 奥辰阅读(339) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

奥辰

莫道君行早，更有早行人。