Vue.js 教程

文章目录

  • 0. 简介
  • 1. Hello, world!
  • 2. 模板语法
    • 2.1 文本
    • 2.2 HTML
    • 2.3 属性
    • 2.4 表达式
    • 2.5 用户输入
    • 2.6 过滤器
    • 2.7 缩写
  • 未完待续。。。

0. 简介

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue 学习起来非常简单(假的)。

1. Hello, world!


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>你好,世界title>
    <script src="//cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js">script>
head>
<body>

<div id="app">
    <p>{
    { message }}p>
div>

<script>
    new Vue({
      
        el: '#app',
        data: {
      
            message: '你好,我是Vue.js!',
        }
    })
script>

body>
html>

Vue.js 教程_第1张图片
接下来展示一个复杂一些的示例。

在Vue构造器中有一个 el 参数,它是DOM元素的id,指定后意味着接下来的改动都在这个元素内,不会超出这个范围。

data 用于定义属性;methods 用于定义函数;{ { }}是模板语法

当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>你好,世界title>
    <script src="//cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js">script>
head>
<body>

<div id="app">
    <div id="vue_det">
        <h1>网站 : {
    { site }}h1>
        <h1>网址 : {
    { url }}h1>
        <h1>耿鸭 : {
    { gh() }}h1>
    div>
    <div>
        <button @click="change">修改button>
    div>
div>

<script>
    new Vue({
      
        el: '#app',
        data: {
      
            site: '耿鸭的网站',
            url: '特别好!',
        },
        methods: {
      
            gh: function () {
      
                return "我是耿耿!";
            },
            change: function () {
      
                alert("我被点击了!");
                this.site = '耿鸭 -> 菜鸭';
            },
        },
    })
script>

body>
html>

Vue.js 教程_第2张图片
Vue.js 教程_第3张图片

2. 模板语法

Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

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

结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

2.1 文本

使用双大括号{ {…}}进行文本插值。
示例见第1节。

2.2 HTML

使用 v-html 指令输出HTML代码。注意与双大括号的区别。


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>你好,世界title>
    <script src="//cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js">script>
head>
<body>

<div id="app">
    <div v-html="content">div>
    <div>{
    { message }}div>
div>

<script>
    new Vue({
      
        el: '#app',
        data: {
      
            content: '

帅气的耿鸭

'
, message: '

美丽的菜鸭

'
, }, })
script> body> html>

Vue.js 教程_第4张图片

2.3 属性

HTML属性中的值应使用 v-bind 指令。
属性包括style样式属性和其他属性,用法是不太一样的,详见以下示例:


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>你好,世界title>
    <script src="//cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js">script>
head>
<body>

<div id="app">
    <div v-bind:style="{
         color: textColor }" v-bind:hidden="hidden">猜猜我是什么颜色div>
    <div>
        <button @click="toggle_color">变色button>
        <button @click="toggle_hidden">显示/隐藏button>
    div>
div>

<script>
    new Vue({
      
        el: '#app',
        data: {
      
            textColor: 'green',
            hidden: false,
        },
        methods: {
      
            toggle_color: function () {
      
                if (this.textColor === 'green') {
      
                    this.textColor = 'red';
                } else {
      
                    this.textColor = 'green';
                }
            },
            toggle_hidden: function () {
      
                this.hidden = !this.hidden;
            },
        },
    })
script>

body>
html>

Vue.js 教程_第5张图片
Vue.js 教程_第6张图片
Vue.js 教程_第7张图片

2.4 表达式

在模板中可以使用JavaScript表达式。


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>你好,世界title>
    <script src="//cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js">script>
head>
<body>

<div id="app">
    <div>
        鸭鸭今年的岁数:{
    { 10 + 10 }}
    div>
    <div v-bind:style="{
         color: ok ? 'green' : 'red' }">
        {
    { ok ? '好的' : '差的' }}
    div>
    <div>
        <button @click="toggle">切换button>
    div>
div>

<script>
    new Vue({
      
        el: '#app',
        data: {
      
            ok: true,
        },
        methods: {
      
            toggle: function () {
      
                this.ok = !this.ok;
            },
        },
    })
script>

body>
html>

Vue.js 教程_第8张图片
Vue.js 教程_第9张图片

2.5 用户输入

v-model 指令用来在input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。

按钮的事件我们可以使用 v-on 监听事件,并对用户的输入进行响应,正如之前演示的那样。


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>你好,世界title>
    <script src="//cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js">script>
head>
<body>

<div id="app">
    <div>
        <input type="text" v-model="msg">
    div>
    <div>
        您输入的内容是:{
    { msg }}
    div>
div>

<script>
    new Vue({
      
        el: '#app',
        data: {
      
            msg: '初始文本',
        },
    })
script>

body>
html>

Vue.js 教程_第10张图片

2.6 过滤器

Vue.js 教程_第11张图片

2.7 缩写

Vue.js 教程_第12张图片

未完待续。。。

你可能感兴趣的