H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】Vue

vue-cli

卸载Vue2.0

npm uninstall -g vue-cli 

安装vue-cli

image.png

查看版本

image.png

创建项目

image.png

创建项目的配置

通过上下箭头可设置选项,按回车键确定
image.png

运行项目

image.png

image.png

注意

  • local:个人创建的Vue项目
  • Network:团队创建的Vue项目

image.png

Vue目录分析

目录
image.png

目录解析

image.png

数据绑定

数据绑定的常见方式便是{{}},也被称为插值表达式

数据绑定的方式

  • v-text:相比插值表达式更加简洁,且没有闪动问题
  • v-html:填充HTML片段,具有跨站脚本攻击
  • v-pre:跳过编译过程,显示原始信息

<template>
<!-- vue模板内容中 所有的内容都是要被一个根节点包裹-->
<div id="app">
    <div>{{name}}</div>
    <div v-text="html"></div>
    <div v-html='html'></div>
    <div v-pre>{{msg}}</div>
</div>
</template>

<script>
export default {
    name: '#app',
    // data:业务逻辑里面定义的数据
    data() {

        return {
            name: '尧子陌',
            text: 'v-text',
            html: '<h1>v-html</h1>',

        }
    }

}
</script>

<style>

</style>

image.png

Vue中的循环

v-for

v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表:

<template>
<!-- vue模板内容中 所有的内容都是要被一个根节点包裹-->
<div id="app">
    <ul>
        <li v-bind:key='item.id' v-for='(item) in list '>{{item}}</li>
        <li v-bind:key="item.id" v-for="(item,index) in list2">
            {{item.title}}
            {{index}}
        </li>
        <li v-bind:key='item.id' v-for="(item,index) in list3">
            {{item.catch +'----'+ index}}
            <ol>
                <li v-bind:key="fruit" v-for="fruit in item.list4">
                    {{fruit.title}}
                </li>
            </ol>
        </li>
    </ul>

</div>
</template>

<script>
export default {
    name: '#app',
    // data:业务逻辑里面定义的数据
    data() {

        return {
            list: ['apple', 'banner', 'cat', 'pear'],
            list2: [{
                'title': 'apple'
            }, {
                'title': 'apple'
            }, {
                'title': 'apple'
            }],
            list3: [{
                'catch': '国内新闻',
                list4: [{
                    'title': 'apple'
                }, {
                    'title': 'apple'
                }, {
                    'title': 'apple'
                }]
            }]

        }

    }

}
</script>

<style>

</style>

image.png

Vue属性绑定

v-bind:绑定属性 可省略为: 动态地绑定一个或多个 attribute

<template>
<!-- vue模板内容中 所有的内容都是要被一个根节点包裹-->
<div id="app">
   <a v-bind:href='url' alt="">百度</a>
   <div v-bind:title='title'>title</div>
</div>
</template>

<script>
export default {
   name: '#app',
   // data:业务逻辑里面定义的数据
   data() {

       return {
           url: 'http://www.baidu.com',
           title: 'title'
       }
   }

}
</script>

<style>

</style>

image.png

Vue动态绑定样式

Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组

class绑定样式

本文地址:H5W3 » 【前端技术】Vue

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址