Vue入门知识

最新推荐文章于 2023-05-17 19:46:30 发布

羊村希望

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量156

点赞数

分类专栏： Vue 文章标签： Vue入门

本文链接：https://blog.csdn.net/oaoa9264/article/details/100576490

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue介绍

前端三大框架：

框架	介绍
Vue	尤雨溪，声明式的JavaScript框架
React	Facebook公司，里面高阶函数比较多，对初学者不友好 es6语法需要很熟练
Angular	谷歌公司，目前更新到7.0，需要学习一下typescript

Vue的基本引入和创建

下载

cdn方式下载
<script src="https://cdn.jsdeivr.net/nmp/vue/dist/vue.js"></script>
引包
```
<script src="./vue.js"></script>
```

cdn方式下载
<script src="https://cdn.jsdeivr.net/nmp/vue/dist/vue.js"></script>

实例化

  //实例化对象
        new Vue({
            el: "#app",
            data: {
                //数据属性
                msg: "小麦",
                person: {
                    name: 'hu.wang',
                    age: 18,
                    sex: '男'
                },
                msg2: 'hello vue'
            },
        })

Vue的模版语法可以插入你想要的任何内容，除了if if-else用三元运算符代替

   <!--模版语法-->
        <h2>{{msg}}</h2>
        <h2>{{person.name}}---{{person.age}}---{{person.sex}}</h2>
        <!--运算-->
        <h2>{{1==2}}</h2>
        <!--字典-->
        <h2>{{ {'name':'王虎'} }}</h2>
        <!--三元运算-->
        <h2>{{ 1>2? '真':'假' }}</h2>
        <!--字符串反转-->
        <h2>{{msg.split('').reverse().join('')}}</h2>

Vue的指令系统

v-text:
      <!--指令系统,命令去做dom操作-->
<body>
    <div id='app'>
        <div v-text="msg"></div>
    </div>
    <script src='vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            //牵扯到vue组件来说的时候,data一定是函数,而且必须要return一个对象,对象里面去弄数据
            data() {
                return {
                    msg: "<h2>小麦</h2>"
                }
            }
        })
    </script>
</body>

结果: <h2>小麦 </h2>


v-html:
     <!--指令系统,命令去做dom操作-->
<body>
    <div id='app'>
        {{msg}}
        <div v-html="msg"></div>
    </div>
    <script src='vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            //牵扯到vue组件来说的时候,data一定是函数,而且必须要return一个对象,对象里面去弄数据
            data() {
                return {
                    msg: "<h2>小麦</h2>"
                }
            }
        })
    </script>
</body>

结果: 小麦


v-on(绑定事件):
      <body>
    <div id='app'>
        {{add(2,3)}}
        <div v-text="msg"></div>
        <div v-html="msg"></div>
        <button @click="handleClick">隐藏</button>
        <div class="box" v-show="isShow"></div>
    </div>

    <script src='vue.js'></script>
    <script>
        //数据驱动视图
        new Vue({
            el: '#app',
            //牵扯到vue组件来说的时候,data一定是函数,而且必须要return一个对象,对象里面去弄数据
            data() {
                return {
                    msg: "<h2>哈哈哈</h2>",
                    isShow: true
                }
            },
            //methods函数
            methods: {
                //methods里面也是对象,当前绑定的元素里面可以有多个方法
                //声明一个函数
                add(x, y) {
                    return x + y
                },
                //驱动
                handleClick() {
                    console.log(this);
                    this.isShow = !this.isShow
                },
            }
        })
    </script>
</body>
v-on简便写法: @
<button @click='handerClick'>{{msgs}}</button>


v-if:
    <div class="box" v-if="isShow"></div>
       //数据驱动视图
        new Vue({
            el: "#app",
            //data是一个函数
            data() {
                return {
                    isShow: true,
                    //isShow: 1==2,
                    //isShow: false,
                    //isShow: 1 == 1,
                }

            },
            methods: {
            }

        })


v-show(style.display):
      <div class="box" v-show="isShow"></div>
       //数据驱动视图
        new Vue({
            el: "#app",
            //data是一个函数
            data() {
                return {
                    isShow: true,
                    isShow: 1==2,
                    isShow: false,
                    isShow: 1 == 1,
                }

            },
            methods: {
            }

        })

v-else:
    <div v-if="Math.random() > 0.5">
            Now you see me
        </div>
        <div v-else>
            Now you don't
        </div>


v-else-if:
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>


v-bind:
       <div id="app">
        <!--v-bind绑定标签中所有属性，image标签的src alt, a标签中的href title-->
        <img v-bind:src="imaSrc" v-bind:alt="msg">
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    imaSrc: '1.jpg',
                    msg: '海贼王'
                }
            }

        })
    </script>
v-bind简便写法: :
<img :src="imaSrc" :alt="msg">
    
  
v-for:
      <div id="app">
        <ul v-if="data.status == 'ok'">
            <!--v-for优先级最高-->
            <li v-for="(item,index) in data.users" :key="item.id">
                <h4>{{item.id}} -- {{item.name}} -- {{item.age}}</h4>
            </li>
        </ul>
        <div v-for="(value,key) in preson">
            <h4>{{key}}--{{value}}</h4>
        </div>
    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    data: {
                        status: 'ok',
                        users: [
                            { id: 1, name: 'li', age: '18' },
                            { id: 2, name: 'zhang', age: '19' },
                            { id: 3, name: 'wang', age: '20' }
                        ]
                    },
                    preson: {
                        name: 'sun'
                    }
                }
            },
            methods: {

            }
        })
    </script>

v-if和v-show的区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-else和v-else-if

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

v-bind和v-on

v-bind可以绑定标签中的任何属性 「image标签的src alt, a标签中的href title」
v-on可以监听js中的所有事件 「mouseenter,mouseleave」

v-for

基于一个数组来渲染一个列表,需要使用 item in name 形式的特殊语法，其中 items 是源数据数组，而 name 则是被迭代的数组元素的别名。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性

羊村希望

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门知识

vue介绍前端三大框架：框架介绍 Vue 尤雨溪，声明式的JavaScript框架 React Facebook公司，里面高阶函数比较多，对初学者不友好 es6语法需要很熟练 Angular 谷歌公司，目前更新到7.0，需要学习一下typescript Vue的基本引入和创建下载 cdn方式下载 <script src...
复制链接

扫一扫