vue

最新推荐文章于 2021-11-25 16:03:09 发布

樊尘大大怪

最新推荐文章于 2021-11-25 16:03:09 发布

阅读量196

点赞数

文章标签： vue html

本文链接：https://blog.csdn.net/weixin_45027950/article/details/108863299

版权

本文详细介绍了Vue.js的核心概念，包括脚本引入、Mustache模板、事件处理、计算属性、组件系统、表单输入绑定以及使用Vue-CLI创建项目。从基础的文本插值、属性绑定到高级的组件通信和动态属性，覆盖了Vue2的全面知识。

摘要由CSDN通过智能技术生成

脚本引入

本地下载引入

https://cn.vuejs.org/js/vue.min.js

CDN引入

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

NPM下载引入

npm install vue

基础架构

基本架构

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue案例</title>
</head>
<body>
    <!-- 定义挂载点 -->
    <div id="app"></div>
    <!-- 引入 vue 脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 创建 vue 对象
        var vm = new Vue({
    
            el:'#app' // 绑定挂载点
        })
    </script>
</body>
</html>

名词释义

挂载点：Vue可以解析范围

Mustache模板

文本插值

Mustache 语法，推荐用法

当 msg 发生变化时，页面也会跟着变化，可以在浏览器终端输入 vm.msg='hello' 进行测试

<body>
    <div id="app">
        <span>{
  { msg }}</span>
    </div>
    <script>
        var vm = new Vue({
    
            el:'#app',
            data:{
    
                msg: 'Hello Vue!'
            }
        })
    </script>
</body>

v-text 指令

<span v-text="msg"></span>

一次性插值

msg 的值在改变，页面也不会发生变化

<span v-once>{
  { msg }}</span>

原始HTML插值

可以解析字符串中的 HTML 代码

<body>
    <div id="app">
        <span v-html="msg"></span>
    </div>
    <script>
        var vm = new Vue({
    
            el:'#app',
            data:{
    
                msg: '<strong>Hello Vue!</strong>'
            }
        })
    </script>
</body>

属性插值

v-bind 指令

<body>
    <div id="app">
        <img v-bind:src="link"/>
    </div>
    <script>
        var vm = new Vue({
    
            el:'#app',
            data:{
    
                link: 'https://cn.vuejs.org/images/logo.png'
            }
        })
    </script>
</body>

缩写模式，推荐

<img :src="link"/>

class插值

绑定字符串数据

:class新增的样式类，会追加到class样式类的后面

<body>
    <style>
        .red{
    color:red;}
        .bg-primary{
    background-color:blue;}
    </style>
    <div id="app">
        <p class="red" :class="pClass">绑定字符串数据</p>
    </div>
    <script>
        var app = new Vue({
    
            el: "#app",
            data: {
    
                pClass:"bg-primary"
            }
        });
    </script>
</body>

绑定对象数据

对象的属性为样式类名，值为bool值，当值为true时，则使用该样式类，否则不使用

<body>
    <style>
        .red{
    color:red;}
        .bg-primary{
    background-color:blue;}
    </style>
    <div id="app">
        <p :class="pClass">绑定对象数据</p>
    </div>
    <script>
        var app = new Vue({
    
            el: "#app",
            data: {
    
                pClass: {
    
                    red: true,
                    'bg-primary': false
                }
            }
        });
    </script>
</body>

绑定数组数据

数组的项为样式的类名

<body>
    <style>
        .red {
    color: red;}
        .bg-primary {
    background-color: blue;}
    </style>
    <div id="app">
        <p :class="pClass">绑定数组数据</p>
    </div>
    <script>
        var app = new Vue({
    
            el: "#app",
            data: {
    
                pClass:['red','bg-primary']
            }
        });
    </script>
</body>

style插值

绑定字符串数据

:style中的样式会合并至style中

<body>
    <div id="app">
        <p style="color: red;" :style="pStyle">绑定字符串数据</p>
    </div>
    <script>
        var app = new Vue({
    
            el: "#app",
            data: {
    
                pStyle: "background-color: blue;"
            }
        });
    </script>
</body>

绑定对象数据

对象名为样式属性名，对象值为样式值

<body>
    <div id="app">
        <p :style="pStyle">绑定对象数据</p>
    </div>
    <script>
        var app = new Vue({
    
            el: "#app",
            data: {
    
                pStyle: {
    
                    color: 'red',
                    'background-color': 'blue',
                }
            }
        });
    </script>
</body>

绑定数组数据

<body>
    <div id="app">
        <p :style="[pStyle,pSize]">绑定数组数据</p>
    </div>
    <script>
        var app = new Vue({
    
            el: "#app",
            data: {
    
                pStyle: {
    
                    color: 'red',
                    'background-color': 'blue'
                },
                pSize:{
    
                    'font-size':'50px'
                }
            }
        });
    </script>
</body>

多重值

为了解决样式的兼容性问题，所以为同一个样式添加不同的前缀，浏览器只会渲染最后一个被支持的值。

<p :style="{
       display: ['-webkit-box', '-ms-flexbox', 'flex'] }">多重值</p>

动态属性

v-bind:[参数名称] 或 :[参数名称] ，参数名称只能为小写字母和数字

v-show 会调控DOM节点的显示与隐藏，下文会具体讲解

将 attr 的值修改为 col 或 row 时，查看效果

<body>
    <div id="app">
        <table border="1" style="width: 200px;height: 200px;">
            <tr>
                <td :[attr+'span']="span">cell</td>
                <td v-show="attr == 'row'">cell</td>
            </tr>
            <tr>
                <td>cell</td>
                <td v-show="attr == 'col'">cell</td>
            </tr>
        </table>
    </div>
    <script>
        var vm = new Vue({
    
            el: '#app',
            data: {
    
                attr: 'col',
                span: 2
            }
        })
    </script>
</body>

以上方式会触发编译警告，建议使用计算属性的方式：

<body>
    <div id="app">
        <table border="1" style="width: 200px;height: 200px;"

最低0.47元/天解锁文章

樊尘大大怪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫