vue基本语法


基本语法

常用属性

  • v-if
  • v-else-if
  • v-else
  • v-for
  • v-on 绑定事件,简写为 @
  • v-model 数据双向绑定
  • v-bind 给组件绑定参数,简写为 :

组件化

  • 组合组件 slot 插槽
  • 组件内部绑定事件 需要 this.$emit(“事件名”,参数)
  • 计算属性的特色:缓存数据

使用 v-bind 动态绑定提示信息

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<!--view层:模版-->
<div id="app">
    <span v-bind:title="msg">
        鼠标悬停会动态展示提示信息
    </span>
</div>

<script>

    var vm = new Vue({
        el: "#app",
        //model: 数据
        data:{
            msg: "hello, vue!"
        }

    });
</script>

</body>
</html>

判断 v-if

if-else

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层:模版-->
<div id="app">
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>
</div>

<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //model: 数据
        data:{
            ok: true
        }

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

if-else if

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层:模版-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>

<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //model: 数据
        data:{
            type: 'A'
        }

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

循环 v-for

<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层:模版-->
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ]
        }
    })
</script>

</body>
</html>

文章作者: Hailong Gao
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Hailong Gao !
评论
  目录