Vue框架初见

最新推荐文章于 2024-04-03 12:04:24 发布

羊咩咩和喵呜

最新推荐文章于 2024-04-03 12:04:24 发布

阅读量183

点赞数

分类专栏： Vue框架文章标签： Vue指令 v-on v-bind: v-text 插值表达式

本文链接：https://blog.csdn.net/qq_42853707/article/details/101314483

版权

Vue框架专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天刚刚开始学习Vue,想写博客纪念一下毕竟已经很长时间没有写了
Vue本来应该很早就学了,但是拖但现在,我要开始感受Vue带来的框架之美了.
今天学习的主要是几个指令
v-text,v-bind:,v-html,v-on,插值表达式的应用,以及几个小问题的解决,话不多说直接看代码吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <script src="lib/vue-2.4.0.js"></script>
    <title></title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<!--将来new的Vue实力,会控制这个元素中的所有内容-->
<div id="app">
  <p v-cloak>----------{{msg}}++++++++</p>
    <!--使用v-clock能够解决差值表达式闪烁的问题-->
    
    <h4 v-text="msg">******</h4>
      <!--默认v-text是没有闪烁问题的-->
    <!--v-text会覆盖元素中原本的 内容,但是差值表达式,智慧替换自己的这个占位符,不会把整个元素内容清空-->
    <div v-html="ssd"></div>
  
    <div>{{ssd}}</div>
    <div v-text="msg2"></div>
    
    <p>{{msg2}}</p>
    
    <input type="button" value="按钮1" v-bind:title="mytitle"/>
    <input type="button" value="按钮2" :title="mytitle +'123'"/>
    <!--v-bind: 是Vue中提供用于绑定属性的指令-->
    <!--注意:v-bind:指令可以简写为 :要绑定的属性-->
    <!--v-bind中,可以写合法的js表达式-->
    <input type="button" value="按钮3" :title="mytitle +'123'" v-on:click="show"/>

</div>
<script>
    //2.创建一个Vue的实力
    //    当我们导入包之后,在浏览器的内存中,就多里一个Vue的构造函数
    var vm =new Vue({
        el:'#app',//表示,当前我们new的这个vue实力,要控制页面中的那个区域
        data:{
//            data属性中,存放的是el中要用的数据
            msg:'1234',
            ssd:'杨冰洁',
            msg2:'<h1>哈哈哈,我是H1</h1>',
            mytitle:'这是一个标题'
        },
        methods:{
            //这个methods属性中定义了当前Vue实力所有可用的方法
            show:function() {
                alert("hello");
            }
        }
    })
    //    $('$content').text(data.msg)
</script>
</body>
</html>

羊咩咩和喵呜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue框架初见

今天刚刚开始学习Vue,想写博客纪念一下毕竟已经很长时间没有写了Vue本来应该很早就学了,但是拖但现在,我要开始感受Vue带来的框架之美了.今天学习的主要是几个指令v-text,v-bind:,v-html,v-on,插值表达式的应用,以及几个小问题的解决,话不多说直接看代码吧<!DOCTYPE html><html lang="en"><head>...
复制链接

扫一扫

专栏目录