VUE学习 --数据类型、el挂点、vbind指令

时间：2020-06-27 14:53:00 阅读：77 评论：0 收藏：0 [点我收藏+]

第一个VUE小程序：Hello World！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
</head>
<body>
<div id="app">
    {{message}}
</div>
<!--开发云vue.js-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!-- 生产环境版本，优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello， world！！！"
        }
    })
</script>
</body>
</html>

el:挂点 --不能挂到html和body上面，最好挂到div

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: ‘#app‘, // 可以是id
  el: ‘.app‘, // 可以是class
  el: ‘div‘, // 可以是标签
  data: {
    message: ‘Hello Vue!‘
  }
})

data：数据对象

技术分享图片

<body>
<div id="app">
    {{message}}
    <h2 >
        {{school.name}}
    </h2>
    <ul>
        <li>{{hobby[0]}}</li>
        <li>{{hobby[1]}}</li>
    </ul>
</div>

<!--开发云vue.js-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!-- 生产环境版本，优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"字符串",
            school:{
                name:"dict字符串",
            },
            hobby:["list字符串1", "list字符串2"],
            age: 23


        }
    })
</script>

Vbind指令

v-text ---只解析成文本

<div id="v_mode_text">
<!--    方法1-->
    <h2 v-text="message"></h2>
<!--    方法2-->
    <h2>{{message}}</h2>
</div>

扩展 -- 字符串拼接

<div id="v_mode_text">
<!--    方法1-->
    <h2 v-text="message + ‘hello world!!!‘ "></h2>
<!--    方法2-->
    <h2>{{message + "hello world!!!"}}</h2>
</div>

<script src="vue.js"></script>
<script>

    var v_mode_text = new Vue({
        el:"#v_mode_text",
        data:{
            message:"v_mode_text"
        }
    })
    
</script>

v-html --解析标签，类似dom的innerHTML

设置标签的innerHTML

<body>
<div id="app">
    <div v-html="message"></div>
</div>

<script src="vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"<a href=‘http://www.baidu.com‘><img src=‘ecfb.jpg‘ alt=‘‘></a>"
        }
    })

</script>

v-on --为元素绑定事件

@dblclick 指令等同于 v-on：dblclick指令，两者无差异

技术分享图片

<div id="app">
    <div>{{message}}</div>
    <input type="button" value="点击" v-on:click="change">
    <input type="button" value="双击事件" @dblclick="change">
</div>

<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "改变前的值"
        },
        methods: {
            change: function () {
                // alert("按钮生效！")
                this.message="改变后的值"
            }
        }
    })

</script>

VUE学习 --数据类型、el挂点、vbind指令

原文：https://www.cnblogs.com/renfanzi/p/13197803.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)