Vue.js 教程（一）

2021/10/12 23:16:31

编程Tag： js vue 教程 data VM 100 --- msg

本文主要是介绍Vue.js 教程（一），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div class="app">
        <!-- 插值表达式 -->
        {{msg}}
        {{count + 100}}
        {{array.split(",").reverse().join(",")}}
        {{count>=100?"Ace":"Taro"}}

        {{initMsg()}}
        <!-- 错误的几种写法 -->
        <!-- {{var a = 1}}
        {{if(true){return "100"}}} -->
    </div>

    <script>
    //     <div class="my-tag">
    //         heiheihei
    //         <span></span>
    //     </div>
    //   {
    //       tagName:"div"
    //       attrs:[
    //           {attrName:"class",value:"my-tag"},
    //       ]
    //       children:[
    //           "heiheihei",
    //           {
    //               tagName:"span",

    //           }
    //       ]
    //   }  
      var vm =  new Vue({
            el:".app",
            //data是一个响应式的vue对象
            //响应式：只要这个数据发生变化，他总能触发些什么，在vue中就是可以触发页面发生改变（渲染）
            //我们同样可以从vm实例中达到data中的变量
            //在vue实例内部，我们可以使用this去获取到data中的变量
            data:{
                msg:"Hello World",
                count:100,
                array:"1,2,3"
            },
            //methods本身是vue中的一个对象
            //和data中的数据一样，我们同样可以从vm实例中达到methods中的方法
            //在vue实例内部，我们可以使用this去获取到menthods中的方法
            methods:{
                //类似于委托，只能在es5中使用
                changeMsg:function(){
                    this.msg = "Hello everyone";
                },
                //这是es6中的写法
                initMsg(){
                    return "Hello Ace";
                }
            },
            mounted(){
             //this.changeMsg();
            }
        })
        console.log(vm.msg);
        console.log(vm.$data.msg);
        console.log(vm);
        
    </script>
</body>
</html>

指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <!-- 在vue中，指令一般都是带有v-作为前缀 -->
    <!-- 在指令中，不需要使用插值表达之，引号中的内容默认为vue实例中的内容 -->
    <!-- 指令一般是响应式的作用于DOM对象 -->
    <!-- v-text 和 v-html -->
    <!-- innerText 和 InnerHTML -->
    <div id="app">
        <div class="innertext"></div>
        <div class="innerhtml"></div>
        <!--  v-text 他会把标签转译成字符串展示出来； -->
        <div v-text="msg"></div>
        <!--  v-html 会直接把字符串中的标签编译成浏览器的标签，当html输出； -->
        <div v-html="msg"></div>
        <script>
            //innerText 他会把标签转译成字符串展示出来；
            document.querySelector(".innertext").innerText = "<span>hahah</span>"
            //innerHTML 会直接把字符串中的标签编译成浏览器的标签，当html输出；
            document.querySelector(".innerhtml").innerHTML = "<span>hahah</span>"
            var vm= new Vue({
                el:"#app",
                data:{
                    msg:"<h1>Ace</h1>",
                }   
            })
        </script>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>

    <!-- v-if 和 v-show -->
    <!-- 他们都有相同的功能 让数据显示或者影藏 -->
    <!-- 其中一个最大的区别在于 v-if 直接不在页面渲染其修饰的标签 -->
    <!-- 而 v-show 只是通过css控制其渲染的标签显示或者影藏 -->
    <div id="app">
       <!-- <div class="show-data" v-show="isShow">{{msg}}---v-show</div> -->
       <div class="show-data" v-if="isShow>10">>10---v-if</div>
       <div class="show-data" v-else-if="isShow==10">==10---v-if</div>
       <div class="show-data" v-else-if="isShow<10 && isShow >0"><10>---v-if</div>
       <div class="show-data" v-else>---v-if</div>

    </div>
    <script>
        var vm= new Vue({
            el:"#app",
            data:{
                isShow:10,
                msg:"Ace",
            }   
        })
    </script>
</body>
</html>

这篇关于Vue.js 教程（一）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Vue.js 教程（一）

插值表达式

指令

相关编程文章