> 文档中心 > Vue基础1（简单易上手，适合前后端）

Vue基础1（简单易上手，适合前后端）

文档中心

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

     {{str}}
   
             //    3. 模拟数据    let data = 'abc';    let vm = new Vue({ // 4. 设置Vue的选项 el: '.app', data: {     str: data }    });

基础-实例选项-EL
作用：当前`vue`实例所管理的`html`视图
值：通常是id选择器（或者是一个`dom`对象）
注意！！！不要让el所管理的视图是html或者是body

基础-实例选项-DATA
Vue 实例的data（数据对象），是响应式数据（数据驱动视图）
1.data中的值{数据名字：数据的初始值}
2.data中的数据msg/count可以在视图中通过{{msg/count}}访问数据
3.data中的数据也可以通过实例访问vm.msg或者vm.$data.msg
4.data中的数据特点：响应式的数据->data中的数据一旦发生变化->视图中使用该数据的位置就会发生变化

 {{msg}}
 {{count}}
 {{list}}
    
         let vm = new Vue({     el:'#app',     data: {  msg: '铁蛋儿',  count: 100,  list: [1,2,3]     } }) vm.count = 200 vm.list.push(4) console.log(vm) console.log(vm.msg) console.log(vm.$data.msg)

基础-实例选项-METHODS
掌握实例选项`methods`中方法的使用及注意事项：
methods其值为一个对象
可以直接通过`VM`实例访问这些方法，或者在指令表达式中使用
方法中的`this`自动绑定为`Vue`实例
methods中所有的方法同样也被代理到了`Vue`实例对象上，都可以通过this访问
注意，不应该使用箭头函数来定义method函数。理由是箭头函数绑定了父级作用域的上下文，所以`this`将不会按照期望指向`Vue实`例

 {{fn()}} {{count}}
     
         let vm = new Vue({     el:'#app',     data: {  count: 100     },     methods: {  fn: function(){      console.log('我被调用了')  },  fn1(){      this.count++  }     } })

理解和使用插值表达式
基础-术语解释-插值表达式（重要）
作用：会将绑定的数据实时的显示出来
形式：通过{{插值表达式}}包裹的形式
用法：{{js表达式、三元运算符、方法调用等}}

 {{1+2+3}}
 {{1>2}}
 {{name+'很帅'}}
 {{count+1}}
 {{count === 1?"成立":"不成立"}}
 {{list}}
    
         let vm = new Vue({     el: '#app',     data: {  name: '小屁孩',  count: 1,  list: [1,2,3].reverse()     } })

基础-术语解释-指令（重要）
指令（`Directives`）是带有`v-`前缀的特殊特性
指令特性的值预期是单个`JavaScript`表达式（`v-for`是例外情况，我们稍后再讨论）
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM
指令位置：起始标签

基础-系统指令-V-TEXT和V-HTML
很像innerText和innerHTMLv-text：更新标签中的内容
v-text：更新标签中的内容
v-text和插值表达式的区别：
v-text 更新整个标签中的内容
插值表达式：更新标签中局部的内容
可以渲染内容中的html标签

 我是小白龙 {{我是铁蛋儿}}
    
         new Vue({     el: '#app',     data: {  msg: '我是铁蛋儿'     } })

基础-系统指令-V-IF和V-SHOW
使用：v-if和v-show后面跟着表达式的值是布尔值，布尔值来决定该元素显示隐藏
注意：v-if是直接决定元素的添加或者删除而 v-show只是根据样式来决定显示隐藏
`v-if` 有更高的切换开销
`v-show` 有更高的初始渲染开销
如果我们需要非常频繁地切换，则使用`v-show`较好
如果在运行时条件很少改变，则使用`v-if`较好

 我是小白龙
 我是铁蛋儿
    
         new Vue({     el: '#app',     data: {  isShow: false     } })

基础-系统指令-V-ON绑定事件
使用：
第一种：v-on：事件名="方法名"
第二种：@事件名="方法名"的方式

// v-on:xx事件名='当触发xx事件时执行的语句' // v-on的简写方法 //修饰符 使用:@事件名.修饰符="方法名" .once - 只触发一次回调 .prevent - 调用 event.preventDefault() 阻止默认事件// v-on修饰符 如 once: 只执行一次  // v-on修饰符 如 prevent: 阻止默认事件

基础-系统指令-V-FOR（数组）
v-for指令基于一个数组来渲染一个列表
v-for语法item in items 或者 item of items
其中items是源数据数组而 item则是被迭代的数组元素的别名

 {{item}}
 {{item}}---{{index}}
 {{item}}
 {{item}}--{{key}}
 {{item}}--{{key}}--{{index}}
    
         let vm = new Vue({     el: "#app",     data: {  list: ['a', 'b', 'c'],  json: {      name: '铁蛋儿',      age: 18  }     } })

Vue基础1（简单易上手，适合前后端）创作打卡挑战赛赢取流量/现金/CSDN周边激励大奖210z