table取tr对象 vue_Vue笔记

最新推荐文章于 2023-06-10 23:43:15 发布

weixin_39771987

最新推荐文章于 2023-06-10 23:43:15 发布

阅读量409

点赞数

文章标签： table取tr对象 vue

本文链接：https://blog.csdn.net/weixin_39771987/article/details/112184869

版权

本文介绍了Vue的基础使用，包括Vue的启动、MVVM特性、指令如v-if、v-for、v-bind、v-on、v-model的用法，以及案例展示了如何在实际场景中应用这些特性。此外，还提到了双向绑定的实现和computed属性的使用。

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

Vue集成了React和Angular的优点，摒弃了他们的缺点。
Vue的官网：https://cn.vuejs.org/v2/api/
Vue诞生于2016年，是现在非常流行的MVVM框架。
Vue提供了“引包”的使用方法，初学者可以在这之下学习语法。不需要webpack，不需CMD打包。
Vue的包：https://cn.vuejs.org/js/vue.js
在react中任何一个组件都是一个class（类），并且这个类继承于React.Component。当你放标签的时候等于实例化了这个类。Vue也是一样，任何一个组件也是一个类，但是Vue有个非常大的特点：语法隐藏底层细节
Vue中的指令都是以v-开头的
v-开头的指令里面不用{ { }}

一、Vue的基本使用

Vue启动

在VueTest>jslib文件夹下创建vue.js文件，将vue官网js文件内容复制进去。

在HTML文件中引用vue.js
唯一一次用new,Vue的主程序要用new来引入
el是element的意思，就是挂载点。
插入值使用{ { }}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{
    {1+1}}</h1>
    </div>
    <script src="jslib/vue.js"></script>
    <script>
        new Vue({
            el:"#app"
        })      
        //实际作用域是id为app的div
        //唯一一次用new,Vue的主程序要用new来引入
    </script>
</body>
</html>

输出结果

2. MVVM特性的演示

创建html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>我爱你{
    {a}}年</h1>
        <button @click="add()">按我加1</button>
        <button @click="minus()">按我减1</button>
    </div>
    <script src="jslib/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                a:100,
            },
            methods:{
                add(){
                    this.a++;
                },
                minus(){
                    this.a--;
                }
            }
        })
    </script>
</body>
</html>

结果：

3. 指令

React中没有指令，指令是Angular发明的，Vue借鉴来的。
标签身上的属性，这些属性有功能性

1）v-if、v-show

v-if是动态的向DOM树内添加或者删除DOM元素（是否上树）;
v-show是通过设置DOM元素的display样式属性控制显隐；
v-if和v-show的值都是布尔值（true, a>9, str.length>5， Math.random>6）
v-开头的指令不用{ { }}，用双引号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="changeisInTree()">v-if添加、删除元素</button>
        <button @click="changeisShow()">v-show显示、隐藏元素</button>
        <h1 v-if="isInTree">你好</h1>
        <h1 v-show="isShow">你好</h1>
    </div>
    <script src="jslib/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                isInTree:true,      //true可见，false不可见
                isShow:true,
            },
            methods:{
                changeisInTree(){
                    this.isInTree=!this.isInTree;
                },
                changeisShow(){
                    this.isShow=!this.isShow;
                }
            }

        })
    </script>
</body>
</html>

结果：

2) v-for

a. 案列一：

v-for用来实现循环某个节点，循环节点必须绑key。v-bind:key=""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
    <ul>
        <li v-for

最低0.47元/天解锁文章

weixin_39771987

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫