Vue2基础-基础输出指令以及不用脚手架的基础开发

一、Hello wrold

1.vue文件的引入，当我们还没有用脚手架开发vue的时候，我们可以先用把vue文档引入的方式简单的使用以及学习vue，引入文档有两种方式

第一种是网页链接的方式把vue.js文件引入，输入代码

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">

第二种是把此网页的文件保存到本地 通过相对路径的方式引入vue.js文件

2.当我们引入vue.js文件之后，我们还需要做一个准备工作才能愉快的玩耍vue，我们需要在script里进行如下代码，新建一个大Vue对象，其中el中的属性是你绑定的作用域只在id=app的节点内生效，data是你的数据，在定义data中元素的时候 key value 键值对的方式定义的，注意在data中不能重复定义，会报错

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

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
               message:'hello world'
            },
        });
    </script>

3.利用{{}}插值的方式进行调用data中的数据

二、vue中的基础输出指令以及区别

1.v-html 当我们可以用v-html同样把上述案例的message输出，可以使用v-html="data中属性名"的方式，即以下代码同样实现message的输出

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

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
               message:'hello world'
            },
        });
    </script>

2.v-text 同样 我们也可以使用v-text来输出message，和v-html的使用方式相同

  <div id="app">
   <p v-text="message"></p>        
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
               message:'hello world'
            },
        });
    </script>

3.v-html和v-text的区别：当我们运行以下代码的时候就会明显的发现两者之间的区别

  <div id="app">
   <p v-html="message"></p>    
   <p v-text="message"></p> 
    {{message}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
               message:<h1>'hello world'</h1>
            },
        });
    </script>

当我们运行之后，我们会发现只有v-html的语句会输出hello world 插值以及v-text会输出<h1>helloworld</h1>,所以通过这个例子我们也能发现它们的区别，v-text会把message中的字符串当成文本则直接输出，而v-html会进行标签并带着里边内容展示出来