vue基础

什么是vue？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

起步

• 外链接引入

安装Vue的方式：
直接CDN引入
1.可以选择引入开发环境版本还是生产环境版本
<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.下载和引入
开发环境 https://vuejs.org/js/vue.js 
生产环境 https://vuejs.org/js/vue.min.js
 
3.NPM安装
开发环境 https://vuejs.org/js/vue.js 
生产环境 https://vuejs.org/js/vue.min.js

vue基本使用

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
     <div id="app">
    
     </div> 
 <script>
      new Vue({
        el: '#app',
        template:`
        <h1>{{title}}</h1>
        `,
        data:{
            title:"为了部落"
        }
      });
  </script>

此时的div里什么也没有 只显示template里的<h1>{{title}}</h1>

el:        

 el 用于挂载要管理的元素  也可以 HTMLElement

template:    

<div> {{title}}</div>// 模块 直接显示在div中
1.模板生成后，会替换掉挂载点指定的元素
2.每一个独立的模板有且只有一个顶级的根节点
3.如果指定el，且没有template，那么el中的outerHtml 如果有的话，优先选择template中的内容

data：      

  data  定义数据 可以对象或者function（组件当中data必须是一个函数）

title：     

在data函数中。 把为了部落 赋值给title  使其显示在页面中

延迟挂载

Let app = new Vue({
Template: ` <div> 我是xxx</div>`,// 模块
 
})
App.$mount( ‘#app’ )  // 指定挂载点
没有el 也会被挂载

render

//此时的h1标签消失，并出现内容为 ‘今天几岁了’
//render覆盖原先的标签和内容
<div id="app">
    <h1>fg</h1>
</div>

<script>

    new Vue({
        el: "#app",
        render(title) { //修改app 标签内容
            return title('p', '今天几岁了')
        },
    });
</script>

vue指令

1.v-html v-text

     <div id="app">
       <p v-html="username">     
       </p>
       <p v-text="username">     
    </p>
     </div>
    <script>
         var app = new Vue({
        el: '#app',
        data: {
          username:"<h1>hello</h1>"
        }
      })
    </script>

加粗的hello就是v-html
h1标签就是v-text

v-html会显示出h1的效果而v-text不会

2.v-if v-show

v-if 隐藏：不会渲染该标签
v-show 显示和隐藏（display:none;） true显示 false 隐藏 可以判断 可以赋值


3.v-once

v-once 不会跟着改变值
4.v-on

v-on 监听事件  v-on:‘函数名’  可以简略为   @函数名


5.v-pre

Mustache会直接显示出来


6.v-cloak

 不添加v-cloak的时候刷新页面有时会闪烁出来{{wwww}} 添加后不会出现

 <style>
        [v-cloak] { display: none;}
    </style>
    <div id="app">
        <p v-cloak>{{wwww}}</p>
    </div>    
  
   <script>
        new Vue({
            el:'#app',
            data:{
               wwww: hhhh 
            }
        })