首页 > 其他分享> > Vue 基础(指令集练习）

Vue 基础(指令集练习）

2021-12-31 15:06:23 作者：互联网

1. Node.js

概述：Node 是一个软件，它可以让JavaScript 运行在上面。

node 只能运行.js 文件
node 运行方法：node XXX.js
node 平台没有dom,bom概念

2. npm

概述：npm 类似 IOS的pod flutter的pub android的git

3. Vue

概述：前端三大框架

Angular (MVC 框架)
React （2013年facebook开源)
Vue (2014年中国在校大学生尤雨溪)
Vue:Vue 是前端中的javascript 框架，源码都封装到了.js的一个文件中。因此我们需要获取到源码

Vue 基本使用：

<!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="./js/vue.min.js"></script>
</head>
<body>
    <div id="app">
         <h1>我是蔡磊，我今年{{age}}岁了</h1>
    </div>
</body>
</html>

<script>
    //引入vue.js 后 其对外暴露了一个Vue的构造函数
    var ve = new Vue({
        // 通过el 让vue实例和便签联系在一起
        el:"#app",
        //vue 实例数据来源
        data:{
            age:100
        }
    })
</script>

4. Vue 框架中常用指令

vue框架提供了很多指令，都是以V*** 开头

4.1 v-text ,v-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>
    <script src="./js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 相当于 <h1>{{age}}</h1> -->
         <h1 v-text="age"></h1>
         
    </div>
</body>
</html>

<script>
    //引入vue.js 后 其对外暴露了一个Vue的构造函数
    var ve = new Vue({
        // 通过el 让vue实例和便签联系在一起
        el:"#app",
        //vue 实例数据来源
        data:{
            age:"我是Vue 哈哈哈哈哈"
        }
    })
</script>

4.2 v-show 指令

v-show 底层是css的display ，控制标签的显示和隐藏
选项卡练习:

<!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="./js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click = "add('路飞')">路飞</button>
        <button v-on:click = "add('娜美')">娜美</button>
        <button v-on:click = "add('索隆')">索隆</button>
       <ul v-show = " '路飞' === info">
           <li>路飞</li>
           <li>路飞</li>
           <li>路飞</li>
           <li>路飞</li>
           <li>路飞</li>
           <li>路飞</li>
           <li>路飞</li>
       </ul>
       <ul v-show = " '娜美' === info">
        <li>娜美</li>
        <li>娜美</li>
        <li>娜美</li>
        <li>娜美</li>
        <li>娜美</li>
        <li>娜美</li>
        <li>娜美</li>
      </ul>
    <ul v-show = " '索隆' === info">
        <li>索隆</li>
        <li>索隆</li>
        <li>索隆</li>
        <li>索隆</li>
        <li>索隆</li>
        <li>索隆</li>
        <li>索隆</li>
    </ul>
    </div>
</body>
</html>

<script>
    //引入vue.js 后 其对外暴露了一个Vue的构造函数
    var ve = new Vue({
        // 通过el 让vue实例和便签联系在一起
        el:"#app",
        //vue 实例数据来源
        data:{
            info:"路飞"
        },
        methods:{
            add(a){
              this.info = a;
            }
        }
    })
    //
</script>

标签：el,索隆,vue,练习,js,路飞,Vue,指令集
来源： https://blog.csdn.net/woshihaizeiwang/article/details/122256354