Vue入门之基本语法

系列文章目录

第一章 Vue 入门之搭建vue脚手架
第二章 Vue入门之项目框架介绍
第三章 Vue入门之基本语法
第四章 Vue入门之企业站点开发实践
第五章 Vue入门之前端部署



前言

vue现在是比较流行的前端框架,花一些时间学习下,特将学习过程分享出来,供大家一起学习。


一、Vue主要文件关系图

在这里插入图片描述

  • vue的默认页面是index.html,index中的<div id=“app”></div>挂载了App.vue根组件,然后所有的其他子组件(hello.vue等)都归属在App.vue这个主组件下。main.js相当于Java中的main方法,是整个项目的入口js。

  • App.vue 是一个vue组件,这个组件中包含三部分内容:页面模板(template),页面脚本(script),页面样式(style)

    • 页面模板中,定义了页面的 HTML 元素,这里定义了两个,一个是一张图片,另一个是 router-view。
    • 页面脚本主要用来实现当前页面数据初始化、事件处理等等操作。
    • 页面样式就是针对 template 中 HTML 元素的页面美化操作。

二、Vue模板文件构成

<!--  -->
<template>
  <div/>
</template>

<script>
// 这里可以导入其他文件(组件,工具js,第三方插件js,json文件,图片文件)
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成(可以访问当前this实例)
  created() {
  },
  // 生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  created() {}, // 生命周期 - 创建之后
  beforeMount() {}, // 生命周期 - 挂载之前
  mounted() {}, //生命周期 - 挂载之后
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能,这个函数会触发
  // 方法集合
  methods: {

  }
}

</script>
<style lang='less' scoped>
//@import url(); 引入公共css类

</style>

1.template

主要是构成html页面的标签。

2.script

vue通常用es6来写,用export default导出,主要包含数据data,生命周期(mounted等),方法(methods)等。

3.style

样式通过style标签包裹,默认是影响全局的,如需定义作用域只在该组件下起作用,需在标签上加scoped.如要引入外部css文件,首先需给项目安装css-loader依赖包,打开cmd,进入项目目录,输入npm install css-loader。

安装完成后,就可以在style标签下import所需的css文件。

<style>
    import './assets/css/public.css'
</style>

三、vue.js基本概念

  • vue.js核心

响应式数据绑定 当数据发生变化的时候,视图自动更新,即双向数据同步,原理利用了ES6中的 Object.definedProperty 中的setter/getter 代理数据,监控对数据的操作。
组合的视图组件即页面最终映射为一个组件树,采用树形数据结构进行设计,方便维护,重用。

  • 虚拟DOM

利用在内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM。当数据发生变化时,能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。

  • MVVM

MVVM 是 Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对 View 和 ViewModel 的双向数据绑定,这使得 ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。 M:Model(数据层,也就是指数据(前端是js)) V:View ( 也就是指DOM层 或用户界面 ) VM : ViewModel (处理数据和界面的中间层,也就是指Vue)

在这里插入图片描述

  • 组件化应用构建
    组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树.

四、vue.js基本语法

1.Vue指令

v-once
这个指令让视图只渲染一次,当相应的数据发生变化,也不会重新渲染。该指令在不需要更新数据的时候使用。

v-html
这个指令主要在需要操作原始HTML的时候使用。

v-bind
该指令在需要绑定HTML标签属性的时候使用。该指令有缩写:。

v-on
该指令主要用于绑定事件处理程序。该指令有缩写@。

v-show、v-if、v-else和v-else-if
这几个指令主要用于条件渲染,将在后面进行介绍。

v-for
该指令用于渲染整个列表,将在后面进行介绍。

v-model
该指令可以让页面元素和数据进行双向绑定。默认情况下数据和页面元素是单向绑定的,使用该指令可以让其变成双向绑定。该指令主要用于处理表单等场景。

2.模板语法

  • 文本插值
<p>{{text}}</p>
<p>{{text + new Date()}}</p>
<script>
  new Vue({
    el: '#app',
    data: {
      text: 1
    }
  })
</script>

  • HTML插值
    要插入HTML代码需要使用v-html指令来指定,这个指令会将它所在的HTML代码块替换为要插入的HTML块.
<span v-html="showhtml"></span>
<script>
  new Vue({
    el: '#app',
    data: {
      showhtml: '<div>hello</div>'
    }
  })
</script>
  • 属性
    如果需要设置和修改HTML属性的话,需要使用v-bind指令。
<button v-bind:disabled="disabled">禁用按钮</button>
<button v-on:click='changeText'>修改文本</button>
<script>
  new Vue({
    el: '#app',
    data: {
      disabled: true
    },
    methods: {
      changeText: function (event) {
        this.text += 1
      }
    }
  })
</script>
  • 计算属性
    计算属性需要在构造Vue实例的时候传入computed属性,然后在相应的函数中处理复杂逻辑。计算属性有个优点就是惰性求值.也就是依赖的数据变化了才会重新计算。
<div id="s">
  <p>单词:{{words}}</p>
  <p>单词大写:{{toUpper}}</p>
</div>
<script>
  new Vue({
    el: '#s',
    data: {
      words: 'hello'
    },
    computed: {
      toUpper: function () {
        return this.words.toUpperCase()
      }
    }
  })
</script>

3.条件渲染

v-if、v-else和v-else-if这几个指令用于条件渲染,让我们可以按照条件在页面上显示和隐藏某些元素。注意v-else-if指令是Vue 2.1新增的。类似的指令还有v-show,不过v-show指令仅仅改变元素的CSS display属性,也是说隐藏的元素还是存在于页面上,仅仅是不显示而已。而v-if等元素会真正创建和销毁元素。

<div id="s">
  <h3>v-if渲染会实际创建和销毁对象</h3>
  <p>分数是:<input type="text" v-model="mark"/></p>
  <p v-if="mark < 60">不及格</p>
  <p v-else-if="mark <80">及格</p>
  <p v-else="">优秀</p>
  <h3>v-show调用CSS display属性</h3>
  <button @click="toggleShow">改变show</button>
  <p v-show="show">看到我</p>
</div>
<script>
new Vue({
    el: '#s',
    data: {
      mark: 80,
      show: true
    },
    methods: {
      toggleShow: function () {
        this.show = !this.show
      }
    }
  })
</script>

4.列表渲染

如果需要渲染一组数据,可以使用v-for指令。v-for指令需要一个item in items块来声明迭代那些数据,这里in也可以改为of。如果需要获取迭代的索引的话,可以把迭代块声明为(item, index) in items这样的。除了迭代一个列表,也可以迭代一个对象的属性。

<div id="s">
  <h3>名字列表</h3>
  <ul>
    <li v-for="name in names">{{name}}</li>
  </ul>

  <h3>人物表格</h3>
  <table>
    <thead>
    <tr>
      <td>编号</td>
      <td>姓名</td>
      <td>年龄</td>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(person, index) of people" :key="index">
      <td>{{index}}</td>
      <td>{{person.name}}</td>
      <td>{{person.age}}</td>
    </tr>
    </tbody>
  </table>

</div>
<script>
new Vue({
    el: '#s',
    data: {
      names: [
        'zhang3',
        'li4'
      ],
      people: [
        {name: 'zhang3', age: 24},
        {name: 'li4', age: 25}
      ]
    }
  })
</script>

5.事件处理

v-on指令用于绑定事件处理函数,这里的函数需要在构造Vue实例的时候在methods属性中声明。

<div id="s">
  <h3>计数器</h3>
  <p>
    <button @click="addCount">增加计数</button>
    <em>{{count}}</em>
  </p>
  <h3>获取按键(单击、回车和空格)</h3>
  <input type="text"
         @keyup.enter="alert('按下了回车')"
         @keyup.space="alert('按下了空格')"
         @click="alert('单击')"/>
</div>
<script>
new Vue({
    el: '#s',
    data: {
      count: 0
    },
    methods: {
      addCount: function () {
        this.count++
      }
    }
  })
</script>

.lazy、.number、.trim几个修饰符,作用分别是在change事件中更新、将表单输入转换为数值以及去掉表单中的前后空格。

6.绑定表单

如果要将数据和页面元素进行双向绑定,使用v-model指令。这个指令主要用于处理表单输入中。

<div id="s">
  <p>文本框:{{text}}</p>
  <p>多行文本:{{textArea}}</p>
  <p>单选按钮:{{radio}}</p>
  <p>复选框:{{checkbox}}</p>
  <p>多选框:{{select}}</p>
  <hr>
  <p>文本框:<input type="text" v-model="text"></p>
  <p>多行文本:<textarea v-model="textArea"></textarea></p>
  <p>单选按钮:<input type="radio" v-model="radio" value="1" id="one"><label for="one">1</label>
    <input type="radio" value="2" v-model="radio" id="two"><label for="two">2</label>
  </p>
  <p>复选框:<input type="checkbox" v-model="checkbox" id="checkbox"><label for="checkbox">复选框</label></p>
  <p>多选框:<select id="select" v-model="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  </p>
</div>
<script>
new Vue({
    el: '#s',
    data: {
      text: 'text',
      textArea: 'textArea',
      radio: '',
      checkbox: '',
      select: '',
    }
  })
</script>

7.组件

定义组件和定义一个Vue实例类似。不同的是,组件需要有自己的模板,而且组件的data属性必须是一个函数。原因是假如一个组件在多个地方复用,那么原本的data属性会导致所有组件实例共用一个属性值。使用函数后,每个组件实例都会有自己独立的数据。

  • 组件定义
  let component = {
    template: '<h3>{{hello}}</h3>',
    data() {
      return {
        hello: 'hello world'
      }
    }
  }
  • 组件注册(全局注册,在全局范围中使用)
Vue.component('hello-world', {
  //实际组件
})
  • 组件注册(局部注册)
Vue.component('hello-world', {
  //实际组件
})

new Vue({
    el: '#s',
    components: {
      'hello-world': component,
    }
  })
<hello-world></hello-world>

如果需要从父组件中传递数据,需要在子组件中声明props属性制定要传入的数据。


<div id="s">
  <h3>hello world组件</h3>
  <hello-world></hello-world>
  <h3>从父组件传递数据</h3>
  <hello-world name="zhang3"></hello-world>
  //如果需要传递动态数据,使用v-bind指令即可。
  <h3>动态传递数据</h3>
  <hello-world :name="name"></hello-world>
</div>
<script>
  let component = {
    template: '<p>{{hello}} {{name}}</p>',
    data() {
      return {
        hello: 'hello world'
      }
    },
    props: [
      'name'
    ]
  }
  let vm8 = new Vue({
    el: '#s',
    data: {
      name: 'yitian'
    },
    components: {
      'hello-world': component,
    }
  })
</script>

8.过渡效果

Vue封装了一个组件transition,当其中的组件被插入、删除,或者发生变化的时候,会自动查看这些组件是否应用了过渡CSS类,然后再恰当的时机插入和删除这些类,从而实现过渡效果。

很多第三方动画库,而且Vue允许我们自定义类名,以便和这些动画库配合使用,如Animate.css。

五、路由

这里讲下路由模式和子路由设置。
在使用Vue路由的时候,我们会发现浏览器中的地址长的是这个样子:xxx/#/。这是Vue路由的默认哈希模式,优点就是兼容性强。还有另外一种模式就是HTML历史模式。要使用这种模式很简单,在构造Vue路由的时候,将mode参数设置为history即可。这样一来,浏览器地址栏就会变成正常状态。当然这种模式也有缺点,就是假如后台没配置好,访问某些页面可能会返回404错误。所以具体使用哪种模式还需要自己仔细考虑。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: HelloWorld
    },
  ],
  mode: 'history'
})

给路由加多一个子路由配置。

{
      path: '/fashion',
      name: 'fashion',
      component: Fashion,
      children: [
        {
          path: '/',
          component: Dec
        },
        {
          path: 'info',
          component: Info
        }
      ]
    }

官方文档

Web前端开发中文版
Vue.js 英文文档
Vue.js 中文文档
Vue.js 中文文档2
Vue路由
Vue的状态管理(vuex)
Eslint规则
Awesome Vue.js
element
Mint UI-基于 Vue.js 的移动端组件库
Animate.css

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

blackoon88

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值