Vue2+3教程-校园博客

快速入门

安装

方式一：将JS文件下载到本地，点击这里下载
方式二：使用CDN的方式引入

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Vue实例

<div id="app">
     {{msg}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: 'hello Vue'
            }
        })
</script>

插值表达式

插值表达式：Vue的一种模板语法
语法

{{ 表达式 }}

注意点：
1. 使用的数据要存在
2. 支持的是表达式，不是语句 if for
3. 不能再标签属性中
示例

<div id="app">
        <h1>{{msg}}</h1>
        <h2>{{name}}</h2>
        <p>将{{nickname}}转大写{{nickname.toUpperCase()}}</p>
        <p>{{nickname + '你好'}}</p>
        <p>{{age >= 18 ? '成年' : '未成年'}}</p>

        <p>{{friend.name}} </p>
        <p>{{friend.decs}} </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: 'hello',
                name: 'Tom',
                nickname: 'tony',
                age: 18,
                friend: {
                    name: 'jepson',
                    decs: '热爱学习 Vue'
                }
            }
        })
    </script>

响应式特性

data中的数据，是会被添加到实力上的
响应式数据数据变化了，视图自动更新
访问数据：实例.属性名
修改数据：实例.属性名 = 新值

Vue指令

v-html

v-html 动态设置innerHTML
示例

<div id="app">
        <div v-html="msg"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: '<a href="https://blog.ttxgzs.com">校园博客</a>'
            }
        })
    </script>

v-show和v-if

v-show底层原理：切换css的display: none来控制显示隐藏
使用场景：频繁切换显示隐藏
v-if 底层原理：根据条件判断控制元素的创建和移除

v-bind

作用：动态的设置html的标签属性，src、url、title等
语法：v-bind:属性名=”表达式”
简写：:属性名
示例

<div id="app">
        <img v-bind:src="imgUrl" >
        <!-- 简写 -->
        <img :src="imgUrl" >
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                imgUrl: 'https://blog.ttxgzs.com/wp-content/uploads/2023/10/21e0cd9640153133.png'
            }
        })
    </script>