Vue01

作者: 绯书Freebook | 来源:发表于2020-03-27 11:49 被阅读0次

目录

1.1.认识Vuejs

  • 为什么学习Vuejs

1.vue在国内领域是必备技能。

  • Vue的渐进式

1.把vue嵌入现成的应用中,带来更多的交互。也可以使用全家桶(core+Vue-router+Vuex)

  • Vue的特点

1.解耦视图和数据
2.可复用组件
3.前端路由
4.状态管理
5.虚拟DOM

1.2. 安装Vue

  • cdn引入
<!--开发版本,包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--生产环境版本,优化了尺寸和速度-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  • 下载和引入
开发:https://vuejs.org/js/vue.js
生产:https://vuejs.org/js/vue.min.js
  • npm安装
    1.webpack和CLI结合使用

1.3.Vue的初体验

  1. Hellow Vue
    • mustache->vue响应式:当数据发送改变,页面产生响应
      <body>
        <div id="app">{{message}}</div>
    </body>
     <script src="vue.js"></script>
      <script>
        //let(变量)/const(常量)
        //编程范式:声明式
          const app=new Vue({
                el:'#app',//挂载要管理的元素
                data:{//定义和存储数据
                    message:‘你好’        
              }  
          })
    
    

//命令编程
</script>
```

  1. Vue列表展示
    • v-for
    • 后面给数组追加元素的时候,新的元素也可以在界面中渲染出来
<body>
  <div id="app">
      <ul>
          <li v-for="item in movies">{{item}}</li>
        </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
  el:'app',
    data:{
      movies:['星际争霸','大哼传奇','Π']
  }
})
app.movies.push('海王')
</script>
</body>

  1. Vue计数器小案例
    -事件监听:click->methods
<body>
  <div id="app">
     <h2>当前计算:{{counter}}</h2>
      <button @click="add">+</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
  el:'app',
    data:{
      counter:0;
  },methods:{
  add:()=>{
          this.counter++
    }
}
})
</script>
</body>

1.4. Vue中的MVVM

MVVM
MVVM的解释
MVVM的代码分布

1.5创建Vue时的options

  • el:
    1.类型:string|HTMLElement
    2.作用:决定Vue管理那个DOM
  • data:
    1.类型:Object|Function(data必须是函数)
    2.作业:Vue的数据对象
  • methods:
    1.类型:{[key:string]:Funtion}
    2.作用:定义Vue方法
  • 生命周期函数:
    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数
    据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在
    这个过程中也会运行一些叫做生命周期钩子的函数。

二. 插值语法

  • mustache语法
   <body>
 <div id="app">
<!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
    <h2>当前计算:{{counter*2}} {{counter+' '+counter}}</h2>
     <button @click="add">+</button>
</div>
<script src="../js/vue.js"></script>
<script>
 const app=new Vue({
 el:'app',
   data:{
     counter:0;
 },methods:{
 add:()=>{
         this.counter++
   }
}
})
</script>
</body>
  • v-once
    1. 表达元素和组件只渲染一次。不随数据变化而变化。
  • v-html
    1.会把string的html解析并渲染出来。
<div id="app">
  <h2 v-html="link"></h2>
</div>
<script>
  let app=new Vue({
  el:"#app",
data:(){
  link:"<a href="#">百度</a>
}
})
</script>
  • v-text
    1.一般只接受一个string类型
  • v-pre({})
  • v-cloak:斗篷

三. v-bind

3.1.v-bind绑定基本属性

  • v-bind:绑定一个或多个属性,或向另一个组件传递props值
  • :href

3.2. v-bind动态绑定class

  • 对象语法::class='{类名:boolean,类名:true}'
<body>
<div id="app">
<h2 :class=“{active:isActive,line:isLine}”>{{mes}}</h2>
<button :click="btnClick"></button>
</div>
<script>
  const app=new Vue({
  el:"#app",
data:{
  mes:'你好’,
isActive:true,
isLine:true
},
methods:{
  btnclick:()=>{
    this.isActive=!this.isActive;
  }  
}
})
</script>
</body>
  • 数值语法:
<!--不加' '解析data,加' '变为字符串-->
v-bind:class="[active,line]"

*v-bind与v-for结合的作业

3.3.v-bind动态绑定style

  • 对象语法
  • 数组语法

四.计算属性

  • 案例一:firstName+lastName
  • 案例二:books->price

相关文章

  • Nexus npm install 报错E401

    背景是搭建nexus后,npm install 无法使用[root@es vue01]# npm isntalln...

  • VUE01

    vm是什么? 差值表达式 v-text指令 v-HTML指令 v-bind v-for v-model v-on ...

  • vue01

    添加事件 添加 {{vel}} 删除 new Vue({ el:'.you', data:{ sg:['dd','...

  • Vue01

    一、认识Vue 定义:一个构建数据驱动的 web 界面的渐进式框架 优点: 1、可以完全通过客户端浏览器渲染页面,...

  • vue01

    vue复习: vue-resource他会将一个$http属性挂载vm上 $http是定义在vue的原型上,实例上...

  • vue01

    vue01 vue到底是什么? 一个mvvm框架(库)、和angular类似,比较容易上手、小巧 vue和angu...

  • Vue01

    目录 1.1.认识Vuejs 为什么学习Vuejs 1.vue在国内领域是必备技能。 Vue的渐进式 1.把vue...

  • vue01

    webstrom中常用的快捷键一:标签自动补全:(1)纯标签补全例:输入h1,按Tab键, (2)纯标签+地址“i...

  • VUE01:Vue编程模式

    要使用Vue,顺带做个笔记,无他!  1. 理解Vue的封装对象;  2.Vue的入门使用;  Vue可以直接使用...

  • Vue01组件化实践-03 插槽 slot

    组件化 slot 插槽 demo github地址:feature/slot 分支 直接上代码体会插槽的使用吧

网友评论

      本文标题:Vue01

      本文链接:https://www.haomeiwen.com/subject/mshfuhtx.html