快速了解与上手Vue：安装教程及基础指令指南

使用Vue首先需要先下载vue

第一步百度直接搜索vue

第二步点击安转，然后下载开发版本，然后使用script标签引入src使用即可

为什么不推荐cdn引入方式呢?

因为cdn系统不稳定，在写项目的时候，有时候会出错，所以，还是直接下载下来使用比较好

vue的基础模板，

   <!--使用对象 -->
    <div id="app">  
        {{msg}} 
    </div>

    <script>
        // console.log(Vue); //检验vue是否成功

        // vm是实例
        // 关闭语法提示
        Vue.config.productionTip = false
        const vm = new Vue({
            el:'#app', //挂载到 #app
            data: { // 对象的写法 data中的数据会挂载到vm上 
              msg:"我是vue中的数据", //配置对象
              person:{
                  name:"queque",
                  age:18
              }
            },

            // data() { //函数的写法
            //     return {
            //      msg:"我是vue中的数据"
            //     }
            // },
        })
        // vm.$mount("#app") //第二种挂载

        // #app(容器)内的内容 作为模板(容器内的内容)解析 按照vue语法去解析模板内容 解析完毕再进行渲染
    </script>

当你在运行vue的时候会老是出现这样的提示

那该怎样关闭vue语法提示呢?

答：你就直接在script标签内写上Vue.config.productionTip = false，就可以关闭语法提示了

Vue常见的几种指令有哪些?

答：1.内容渲染指令，2.条件渲染指令，3.属性绑定指令，4.事件绑定指令，5.列表渲染指令，6.双向数据绑定

vue6种常见指令分别有什么作用?

1.内容渲染指令:v-html 它会将值解析成Dom结构，并放到使用该指令的节点中，还有一个v-text,但它比v-html拉胯，因为它不会识别Dom结构，通通按字符串处理，

数据要写在return里，要使用里面的值，就要{{}}进行取值
{{}}内可以是Js表达式，一定会生成一个值，(运行出来一个值，本身就是一个值)，但不能写js语句，像 if for while do whlie语句都是不可以的

 <div id='app' v-html="msg"> 
     {{msg + '!'}}
     {{1 === 1 ? 1 : 0}}
     {{msg}} 不会主动解析成Dom结构

   < </div>

  <script src='../vue.js'></script>
 
   Vue.config.productionTip = false
   new Vue({
     el: '#app',
     data() {
        return {
            msg:"数据"
        }
     },
    //  delimiters:['${', '}'] //修改插值 {{}}写法  //千万不要这样做，不如会被打的
   })

2.条件渲染指令:v-if 假如v-if是true显示v-if的节点，是false就显示else的节点，且两个节点之间不能出现其他内容，必须搭配使用，

 <!-- 2.1 条件渲染指令: v-if -->
   <!--根据某个条件是你在还是我在  -->
   <div id='app'> 
        <span v-if="false">显示</span>

        <!-- 2.2 v-else -->
        <span v-else>显示2 else中的</span>

        <!-- 2.3 v-else-if 多个判断分支 -->
        <span v-if="heigth >= 60 && score < 80 ">及格</span>
        <span v-else-if="score >= 80">优秀</span>
        <span v-else-if="score < 60">回炉重造</span>

    </div>

   
     <script src='../vue.js'></script>
   <script>
   Vue.config.productionTip = false
   new Vue({
     el: '#app',
     data() {
        return {
            // msg:"数据"
            // msg:`<span style="color:red;">我是span</span>`,
            // ptxt:"你好"

            // height:100

            score:99
        }
     },
    //  delimiters:['${', '}'] //修改插值 {{}}写法
   })  

注意点

// 不建议用: v-html

// 使用场景: xxxxx是个不健康网站就 芭比Q了

// 评论内容区 v-html='<a href='xxxxx'>点我有好看的</a>'

// 评论input 用户输入的 <a href='xxxxx'>点我有好看的</a>