【2022.4.20修改】Vue_day02_模板语法_指令_表单数据绑定_DevTools使用

Vue 四天课程学习笔记_第2天

课程内容概要:

1.  介绍Vue中模板语法数据绑定

主要是概述了el、data、 methods语法的作用及注意事项

2. 介绍Vue指令

v-html、v-once、v-if(渲染与否)、v-show(显示与否)、v-for(循环)、

v-on(绑定事件,简写是@)、v-bind(单向绑定,简写是:)、v-model(双向绑定)

序号 指令 简写 作用 示例
1 v-html
2 v-once
3 v-if 渲染与否
4 v-show 显示与否
5 v-for 循环
6 v-on @ 绑定事件
7 v-bind : 单向绑定
8 v-model 双向绑定

3. 介绍表单控件双向数据绑定

4. 介绍Vue-DevTools安装和使用


demo中使用的vue版本号为v2.5.16


客户端UI编程
数据驱动视图思想来源于WPF
WPF用于开发Windows中图形界面程序
后被Angular将该思想带入前端领域


总结:
1. 传统多页面应用程序 与 SAP单页面应用程序
2. 前端分离的开发方式
3. Vue 单向数据绑定(v-bind)
4. Vue 表单控件的双向数据绑定(v-model)
5. Vue 事件处理(v-on:click)
6. Vue Class绑定(v-bind:class)


提到了 github pages 免费托管静态页面
李鹏周老师的在线笔记 vuejs.circle.ink
Vuejs不支持IE8及其以下版本
Vue最早发布于 2014.2
Vue1.0发布于 2015.10
Vue2.0发布于 2016.8
最新版本为2.5.16

最新版本为2.6.14(2021.1.7)
每个版本更新日志见 github中的release发布记录(github.com/vuejs/vue/releases)


在线版:vuejs.org/js/vue.js
精简版:vuejs.org/js/vue.min.js
安装版: npm install vue –save


数据绑定:
1. {{ data }}
2. v-html
3. v-bind


表单控件双向数据绑定
1. input之text
2. input之checkbox


条件与循环
1. v-if (渲染与否)
2. v-show (显示与否)
3. v-for


事件处理
1. v-on


组件化:
组件系统是Vue的一个重要概念之一,

一个组件本质上是一个拥有预定义选项的Vue实例


注册一个组件示例代码如下:
Vue.component(‘beyond-item’,{
template: ‘<li>未闻花名</li>’
})


现在可以使用它构造一个组件模板:
<ol>
<beyond-item></beyond-item>
</ol>


组件的高级定义,

使用来自父类的数据
Vue.component(‘beyond-item’,{
// prop意思是 道具,支撑的意思
// 数据对象 来自基类
props: [‘girl_from_base’]
template: ‘<li>girl_from_base.girlName</li>’
})


什么是组件:
组件可以扩展HTML元素,
封装可重用的代码(如element-ui)

组件是自定义的HTML元素

在某些情况下,组件 还可以用 is 特性 对原生HTML元素进行扩展


所谓的 is特性 意思就是有些元素,比如 ul 里面只能直接包含 li元素,像这样:

<ul>
    <li></li>
</ul>

而不能:

<ul>
    <your-component>
</ul>

这样就不能复用your-component这个组件了,

如果要达到我们的目的,我们就要使用is特性像这样:

<ul>
    <li is="your-component"></li>
</ul>

注意: 所有的Vue组件 同时也都是 Vue的实例,
因此组件可以接受相同的选项对象(如data,methods等),除了一些根级特有的选项,


同样的,组件也提供了相同的生命周期钩子

创建第一个Vue实例
每一个Vue应用都是通过 Vue函数 创建一个新的Vue实例开始的
var appVue = new Vue({
// 选项
})
当创建一个Vue实例时, 一般需要传入一个对象,即选项对象


选项1:  el
作用是: 提供一个在页面上已经存在的DOM元素, 作为Vue实例的挂载(管理)目标
可以是一个HTMLElement,也可以是CSS选择器
注意: 不能作用到<html>或者<body>元素上
PS:  可以通过appVue.$mount(‘#id_div_container’)实现手动挂载


选项2: data
驱动视图的引擎: 数据
可以通过appVue.$data访问 数据对象

同时, Vue的实例appVue 也代理代理了data对象上所有的属性

因此,可以通过appVue.girlName 代替 appVue.$data.girlName

注意: 视图中绑定的数据,必须 显式地 在选项data中 进行初始化

并且,只能修改data数据对象中的属性的值,不能动态对data数据对象 进行添加新的属性


<!-- 第3步, vue最终渲染结果的容器 -->
<div id="id_div_container" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
     hello {{ girlName }}
</div>

        <!-- 第1步,导入vue.js -->
<script type="text/javascript" src="/node_modules/vue//dist/vue.js"></script>

        <!-- 第2步,生成一个全新的vue对象实例 -->  
<script type="text/javascript">       
    var appVue = new Vue({
        // el 绑定的id 只能用于非html和非body的标签元素
        // el 还可以 document.getElementById('id_div_container')
        // el: '#id_div_container',
        data: {
            girlName: '面码'
        },
        methods: {
        }
    }).$mount('#id_div_container')
    // 只能修改,不能添加
    appVue.$data.girlName = 'mathilda'
    // 下面是错误的做法, 不能动态追加新的 属性
    appVue.$data.girlAge = 12
</script>


选项3: methods
methods将被混入到Vue实例appVue中
因此, 可以通过appVue访问这些方法
或者在指令表达式中使用

注意:  方法中的this 自动绑定为 Vue实例 (appVue)


千万注意:  不应该使用 箭头函数 来定义methods中的函数
例如错误写法: addFunction: () => this.count++
理由是: 箭头函数 绑定的是 父级作用域的上下文
因此, this 将不会按照期望指向Vue实例,而是指向window


完整示例:
var appVue = new Vue({
data: {  count : 1  },
methods: {
addFunction: function() {
this.count++
}
}

})


推荐使用ECMS6中的简写形式:

var appVue = new Vue({

data: {count : 1},
methods: {
addFunction () {
this.count++
}
}

})


选项1: data 详解
类型: Object | Function
注意: 组件定义情况下, data只接受 function
详细:
data 是驱动视图的引擎,Vue将递归地把data里的属性转换成getter/setter方法,
从而让data里的属性能够实现 响应式


注意: 对象: 必须为纯粹的对象 (含0个或n个key-value键值对)
即: 通过浏览器API创建的原生对象,其原型上的属性将会被自动忽略???
大概的意思就是: data应该只是单纯的数据,而不应该拥有行为???


注意: 一旦观察过, 就不需要再次在数据data对象上     添加响应式属性了.

因此,推荐在创建实例的同时,声明所有的根级响应式属性???


注意: 以_和$开头的属性,不会被 Vue实例代理
因为它们可能和Vue内置的属性或API方法发生冲突
这时,你仍可以通过使用appVue.$data._property的方式来访问这些以_和$开头的属性


注意: 如果是一个组件被定义, 那么data选项 必须声明为 返回一个 初始数据对象的 函数!
因为组件 有可能被用来创建多个实例

如果 data 依然还是一个纯粹的对象的话,那么就会发生所有的通过组件 创建出来的 实例对象 共享同一个 数据对象的 尴尬局面 – -//

而如果data是一个函数,那么就不会出现这样的尴尬局面了

因为,通过data函数,组件每次创建一个新的实例后,可以通过调用其自身独有的data函数,从而返回初始数据的一个全新的副本数据对象


其他的选项还有:

选项 / 数据
data
props
propsData
computed
methods

watch


选项 / DOM
el
template

render

renderError


选项 / 生命周期钩子
beforeCreate
created
beforeMount
mounted

beforeUpdate
updated

activated
deactivated

beforeDestroy
destroyed

errorCaptured


选项 / 资源
directives
filters

components


选项 / 组合
parent
mixins
extends

provide / inject


选项 / 其它
name
delimiters
functional
model
inheritAttrs
comments


el 选项既可以是 ‘#id_div_container’
也可以是 document.getElementById(‘id_div_container’)


el 选项
类型: string | HTMLElement
限制: 只能在new Vue的同时,进行指定
详细: 提供一个页面上已经存在的DOM元素作用为Vue实例挂载的目标
可以是CSS选择器,也可以是一个HTML元素
在实例挂载之后,可以通过appVue.$el访问


如果实例化时,有这个el选项,那么实例将立即进入编译过程;
否则,需要显示调用appVue.$mount(‘#id_div_container’)才会手动开始进入编译状态???
例如:
new Vue({
data: {
girlName: ‘面码’
}

}).$mount(‘#id_div_container’)

// 上面的方式,更好理解,因为具有明显的挂载的动作的意图


注意: 不推荐挂载到html或body元素上面
注意: 如果选项render函数 和 选项template函数,均无,
那么挂载的目标DOM元素的HTML代码会被用作 模板,
此时,必须使用Runtime + Compiler 构造 Vue库 ???Excuse Me???


Vue实例的生命周期,如图所示:


我们在里面可以看到几个钩子:

  • beforeCreate
    • 在实例初始化init之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  • created
    • 在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见
  • beforeMount
    • 在挂载开始之前被调用:相关的 render 函数首次被调用。
  • mounted
    • el 已经被新创建的 vm.$el 替换,并且成功挂载到实例上去之后才调用该钩子。
    • 如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
  • beforeUpdate
    • 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
    • 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
  • updated
    • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
  • activated
  • deactivated
  • beforeDestroy
  • destroyed
  • errorCaptured

文本
数据绑定最常见的形式就是使用 Mustache 语法的文本插值:
<span> 芳名: {{ girlName }} </span>
当 data对象中 girlName 的值发生改变时,
Mustache语法中的值,也同时发生改变


一次性绑定
通过v-once指令, 也可以执行一次性地赋值
之后,data对象中的 girlName的值 发生改变时,
Mustache语法中的值, 不再变化
例如:

<span v-once> 初恋: {{ firstLover }} </span>


vue_06.html核心代码如下:

<!-- 第3步, vue最终渲染结果的容器 -->
<div id="id_div_container" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
     <span v-once> 初恋: {{ firstLover }} </span>
</div>

        <!-- 第1步,导入vue.js -->
<script type="text/javascript" src="/node_modules/vue//dist/vue.js"></script>

        <!-- 第2步,生成一个全新的vue对象实例 -->  
<script type="text/javascript">       
    var appVue = new Vue({
        // el 绑定的id 只能用于非html和非body的标签元素
        // el 还可以 document.getElementById('id_div_container')
        // el: '#id_div_container',
        data: {
            girlName: '面码',
            firstLover: '某某某'
        },
        methods: {
        }
    }).$mount('#id_div_container')
    // 只能修改,不能添加
    appVue.$data.girlName = 'mathilda'
    // 下面是错误的做法, 不能动态追加新的 属性
    appVue.$data.girlAge = 12
</script>  

效果如下:


Mustache语法 不能写在标签元素的 属性值里, 要报错的


Interpolation的解释如下:


colon的解释如下:


输出HTML

Mustache语法 只会将data对象中的属性里的数据   显示成普通文本,

而不是让浏览器进行解释并生成带有效果样式的HTML代码

例如:

data: {
rawHTML: ‘<span style=”color:red”>hello beyond</span>’

}

Mustache语法 会原样输出字符串,效果如下:

<span>{{ rawHTML }}</span>


有时候(什么时候???),需要将HTML源码 输出给浏览器,让其解释并生成带有效果样式的HTML代码,

这时,就要用到v-html指令了

示例:
<span v-html=’rawHTML’></span>

这时,span标签节点,就会被替换成原生的rawHTML代码,供浏览器去渲染

注意: 在rawHTML不能使用Vue的语法(如mustache)


注意: 这样做非常滴危险,很容易导致XSS攻击

XSS 全称为 Cross Site Script,即跨站脚本攻击,为了避免为CSS混淆,故改叫XSS

注意: 任何情况下,都不要 将用户输入的html代码原封不动地进行渲染和运行

XSS攻击分为三种,分别是:

1. Reflected XSS(基于反射的XSS攻击)

2. Stored XSS(基于存储的XSS攻击)

3. DOM-based or local XSS(基于DOM或本地的XSS攻击)


效果如下:

完整代码如下:

<!-- 第3步, vue最终渲染结果的容器 -->
<div id="id_div_container" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
    <!-- v-html的属性值是: data对象中的属性 -->
     <span v-html="rawHTML"></span>
</div>

        <!-- 第1步,导入vue.js -->
<script type="text/javascript" src="/node_modules/vue//dist/vue.js"></script>

        <!-- 第2步,生成一个全新的vue对象实例 -->  
<script type="text/javascript">       
    var appVue = new Vue({
        // el 绑定的id 只能用于非html和非body的标签元素
        // el 还可以 document.getElementById('id_div_container')
        // el: '#id_div_container',
        data: {
            girlName: '面码',
            rawHTML: '<span style="color:red">hello beyond</span>'
        },
        methods: {
        }
    }).$mount('#id_div_container')
</script>  


        <p class="sgcenter sgcontentcolor">
            <b>注意: v-html指令的属性值是data对象中的属性名rawHTML<br/>
            该rawHTML属性的值,将替换掉v-html指令所在标签
        </p>


v-bind指令
v-bind简写是 :
v-bind只能用于 HTML元素的属性上
v-bind的值是一个JS表达式,和 Mustache一毛一样,除了没两个大括号 {{ }}
总结:
Mustache {{ }} 用于 文本PlainText绑定
v-bind:用于 HTML标签属性上

例如,动态给a标签的属性href赋值

代码如下:

<!-- 第3步, vue最终渲染结果的容器 -->
<div id="id_div_container" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
    <ul>
        <li v-for="girl in girlArr">
            <a v-bind:href="'http://baidu.com/s?wd=' + girl.girlAnime">{{ girl.girlName }}</a>
        </li>
    </ul>        
</div>

        <!-- 第1步,导入vue.js -->
<script type="text/javascript" src="/node_modules/vue//dist/vue.js"></script>

        <!-- 第2步,生成一个全新的vue对象实例 -->  
<script type="text/javascript">   
    var girlArr = [
        {
            girlName: "面码",
            girlAnime: "anohana"
        },
        {
            girlName: "逢坂大河",
            girlAnime: "龙与虎"
        },
        {
            girlName: "mathilda",
            girlAnime: "这个杀手不太冷"
        }
    ]    
    var appVue = new Vue({
        // el 绑定的id 只能用于非html和非body的标签元素
        // el 还可以 document.getElementById('id_div_container')
        // el: '#id_div_container',
        data: {
            'girlArr': girlArr
        },
        methods: {
        }
    }).$mount('#id_div_container')
</script>  


        <p class="sgcenter sgcontentcolor">
            <b>注意: 在v-bind指令中 不需要 也不能 使用mustache{{ }}<br/>
            其他与mustache{{ }}一模一样
        </p>


效果如下:


v-bind属性绑定
由于Mustache不能作用于 HTML标签的属性上
所以提供了一个新的指令v-bind
示例:
<div v-bind:id=”propertyDynamicID”></div>
其中:
data:{
propertyDynamicID: ‘id_div_1’
}


又比如:
<button v-bind:disabled=”isBtnDisabled”> 删除 </button>
其中:
data: {
isBtnDisabled: true
}
注意: 如果isBtnDisabled的值是 null 、undefined、 false
那么,属性disable则可能都不会出现在最终渲染出来的元素里 (图省事~)


为true时 的 效果如下:


为false时的效果如下: (直接没有渲染生成disabled属性了)


Vue.js无论是在Mustache语法中,还是在v-bind指令里
都完全支持JS表达式,唯一限制就是: 只能包含单个表达式
例如:
{{ girlAge + 10 }}
{{ isLoli ? ‘YES’ : ‘NO’}}
{{ girlName.split(”).reverse().join(”) }}
<div v-bind:id=”‘id_div_’ + propertyDynamicID”></div>


下面语句,不会生效 (条件语句 可用 三目运算代替)
{{  var girlAge = 13 }}
{{  if(true){
return “done”
}else{
return “moot
}

}}


在v-bind中使用三目运算符示例代码如下:

<!-- v-bind: 布尔值 -->
    <button v-bind:disabled="isBtnDisabled" class="btn" v-bind:class="{'btn-danger': isBtnDanger?true:false}"> 删除 </button>      

    var appVue = new Vue({
        data: {
            'isBtnDisabled': false,
            'isBtnDanger' : true,
        },
        methods: {
        }
    }).$mount('#id_div_container')

模板表达式都被放在沙盒中,

只能访问全局变量的一个白名单,如Date和Math
因此, 不应该在模板表达式中 访问一个由用户定义的全局变量 ???Excuse Me???


指令包括:
v-html
v-for
v-bind
v-on
v-model
v-text
v-show
v-if
v-else-if
v-else
v-pre

v-cloak


指令Directives
是带有v-前缀的属性
指令的值应该是单个JavaScript表达式 (v-for除外)


指令作用: 当表达式的值发生改变时,产生连带影响,使DOM同步改变

例如 v-if 指令的值 isVisible 是data对象中的属性
<p v-if=”isVisible”></p>
当isVisible变化成false时,标签p将不会被渲染到DOM树中
当isVisible变化成true时,标签p将重新被渲染到DOM树中


指令参数:
一些指令能够接收一个参数,
方式是在指令后面以冒号连接
例如:
<a v-bind:href=”girlId”>{{ girlName }}</a>

这儿的v-bind指令就可以响应式地设置a标签的href属性

注意: href属性就是指令v-bind的参数
data对象中的girlId的值,将绑定到href属性的值


又比如:
<a v-on:click=”btnClickFunction”> 点我试试 </a>
这儿的v-on指令的参数是click,是事件的名字
methods对象中的btnClickFunction函数,就是响应该事件的处理函数


又比如:
<input type=”text” v-bind:placeholder=”girlNameHint” />
这儿v-bind指令的参数就是placeholder属性


又比如:
<input type=”text” v-on:focus=”textViewFocusFunction” />
这儿v-on指令的参数是focus,是事件的名字
methods对象中的textViewFocusFunction函数,

就是响应该事件的处理函数


vue_11.html示例代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="/public/img/beyond2.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="未闻花名-免费零基础教程-beyond">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY,XML,JSON,C,C++,C#,OC,PHP,JAVA,JSP,PYTHON,RUBY,PERL,LUA,SQL,LINUX,SHELL,汇编,日语,英语,泰语,韩语,俄语,粤语,阿语,魔方,乐理,动漫,PR,PS,AI,AE">
    <title>beyond心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="/public/css/beyondbasestylewhite5.css">
    <script type="text/javascript" src="/public/js/nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("/public/img/sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="/public/css/beyondbuttongreen.css">

    <link rel="stylesheet" type="text/css" href="/public/lib/bootstrap/node_52_v337_bootstrap_backup.css">


    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->


    <style type="text/css">
        
    </style>
    
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        
<!-- 第3步, vue最终渲染结果的容器 -->
<div id="id_div_container" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
          <p v-if="isVisible">我们仍未知道那年夏天所见到的花的名字</p>
          <input type="text" v-bind:placeholder="girlNameHint" 
          v-on:focus="textViewOnFocusFunction"
          v-on:blur="textViewOnBlurFunction"
          />
          <br/>
          
</div>

        <!-- 第1步,导入vue.js -->
<script type="text/javascript" src="/node_modules/vue//dist/vue.js"></script>

        <!-- 第2步,生成一个全新的vue对象实例 -->  
<script type="text/javascript">   
    var appVue = new Vue({
        // el 绑定的id 只能用于非html和非body的标签元素
        // el 还可以 document.getElementById('id_div_container')
        // el: '#id_div_container',
        data: {
            isVisible: true,
            girlNameHint: "请输入妳的名字",
            isAlreadyAlert: false
            
        },
        methods: {
            textViewOnFocusFunction(){
                NSLog('on focus')
                if (!this.isAlreadyAlert) {
                    window.alert(this.girlNameHint)
                }
                
            },
            textViewOnBlurFunction(){
                NSLog('on blur')
                this.isAlreadyAlert = true
            }
        }
    }).$mount('#id_div_container')
</script>  


        <p class="sgcenter sgcontentcolor">
            <b>注意: 
        </p>

        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>  

效果如下:


下面是常见的指令
v-if 渲染不渲染
v-show 显示不显示
v-for  列表
v-on   事件注册
v-bind 单向属性绑定
v-model 表单控件 双向属性绑定
v-once  只绑定一次
v-html  该指令的值(常为原始html代码) 将替换掉 该指令所在的DOM元素


指令修饰符
可以在指令的参数后面 用  .  指定修饰符
用于指定指令以某一种特殊方式进行绑定
例如:

<form v-on:submit.prevent=”postRequestFunction”></form>

<a v-on:click.prevent=”anchorClickFunction”>那朵花</a>

这儿v-on指令的参数是submit
参数submit后面跟着 指令修饰符prevent
作用是执行下面的语句: event.prventDefault()
通过调用该方法,可以阻止提交表单。


注意特殊情况:

如果 Event 对象的 cancelable 属性是 fasle,
那么就没有默认动作,或者不能阻止默认动作。

但无论哪种情况,调用该方法都没有作用。???


指令缩写
v-bind完整写法
<a v-bind:href=”girlID”></a>

v-bind的缩写为 「:」
<a :href=”girlID”></a>


v-on的完整写法
<a v-on:click=”anchorClickFunction”></a>

v-on的缩写为   「@」

<a @click=”anchorClickFunction”></a>


vue_12.html代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="/public/img/beyond2.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="未闻花名-免费零基础教程-beyond">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY,XML,JSON,C,C++,C#,OC,PHP,JAVA,JSP,PYTHON,RUBY,PERL,LUA,SQL,LINUX,SHELL,汇编,日语,英语,泰语,韩语,俄语,粤语,阿语,魔方,乐理,动漫,PR,PS,AI,AE">
    <title>beyond心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="/public/css/beyondbasestylewhite5.css">
    <script type="text/javascript" src="/public/js/nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("/public/img/sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="/public/css/beyondbuttongreen.css">

    <link rel="stylesheet" type="text/css" href="/public/lib/bootstrap/node_52_v337_bootstrap_backup.css">


    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->


    <style type="text/css">
        
    </style>
    
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        
<!-- 第3步, vue最终渲染结果的容器 -->
<div id="id_div_container" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
            <!-- 指令v-on的简写是@
                 参数是click
                 修饰符是prevent(作用是阻止a标签默认的跳转行为)
             -->
          <a :href="girlID" @click.prevent="anchorClickFunction" >那朵花</a>
</div>

        <!-- 第1步,导入vue.js -->
<script type="text/javascript" src="/node_modules/vue//dist/vue.js"></script>

        <!-- 第2步,生成一个全新的vue对象实例 -->  
<script type="text/javascript">   
    var appVue = new Vue({
        // el 绑定的id 只能用于非html和非body的标签元素
        // el 还可以 document.getElementById('id_div_container')
        // el: '#id_div_container',
        data: {
            girlID: 5267

            
        },
        methods: {
            anchorClickFunction(event){
                // 这儿看不到控制台输出结果,因为一点击就自动默认地跳转到新的链接了
                NSLog('anchorClickFunction')
                // 因为,需要阻止默认事件
                // event.preventDefault()
            }
        }
    }).$mount('#id_div_container')
</script>  


        <p class="sgcenter sgcontentcolor">
            <b>注意: @click.prevent="anchorClickFunction"<br/>
            指令参数click,指令修饰符prevent<br/>可阻止a标签默认的跳转行为

        </p>

        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>  


效果如下:


在接下来的v-on和v-for的演示中,你还将看到指令修饰符的其他应用场景


组件Component
组件化是Vue.js最大特点之一
组件可以扩展html元素,封装可重用代码,提高开发效率,降低维护成本
组件是自定义元素,有时候 还可以通过is特性  扩展原生的html元素

组件是Vue的实例,可接收同样的选项对象,并提供同样的生命周期钩子


Class与Style绑定
class和style都是属性, 因此我们可以使用v-bind指令
当v-bind指令于的参数是class或style时,

表达式的结果除了字符串之外,还可以是对象或数组
例如:
我们可以给v-bind:class传递一个对象,对象里的键key是 className, 值value是 data里的一个boolean,以此达到动态切换class的效果

<div v-bind:class=”{class_div_container: isNeedClass}”></div>


上面代码的意思是:
根据data对象中的isNeedClass的true or false来决定 是否添加名为class_div_container的样式


还可以通过传入多个key – value来 实现 动态切换多个 className
并且 v-bind:class可以跟原生的class属性同时存在
例如:
<div class=”class_div_center”
v-bind:class=”{‘class_div_container’: isNeedClass,’class_div_font’: isError}”>

</div>

vue_13.html代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="/public/img/beyond2.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="未闻花名-免费零基础教程-beyond">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY,XML,JSON,C,C++,C#,OC,PHP,JAVA,JSP,PYTHON,RUBY,PERL,LUA,SQL,LINUX,SHELL,汇编,日语,英语,泰语,韩语,俄语,粤语,阿语,魔方,乐理,动漫,PR,PS,AI,AE">
    <title>beyond心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="/public/css/beyondbasestylewhite5.css">
    <script type="text/javascript" src="/public/js/nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("/public/img/sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="/public/css/beyondbuttongreen.css">

    <link rel="stylesheet" type="text/css" href="/public/lib/bootstrap/node_52_v337_bootstrap_backup.css">


    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->


    <style type="text/css">
        .class_div_center {
            text-align: center;
        }
        .class_div_container {
            margin:0 auto;
            background: black;
        }
        .class_div_font {
            color: white;
        }
    </style>
    
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        
<!-- 第3步, vue最终渲染结果的容器 -->
<div id="id_div_container" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
             <div class="class_div_center"
                  v-bind:class="{'class_div_container': isNeedClass,'class_div_font': isError}">
                  未闻花名
             </div>
</div>

        <!-- 第1步,导入vue.js -->
<script type="text/javascript" src="/node_modules/vue//dist/vue.js"></script>

        <!-- 第2步,生成一个全新的vue对象实例 -->  
<script type="text/javascript">   
    var appVue = new Vue({
        // el 绑定的id 只能用于非html和非body的标签元素
        // el 还可以 document.getElementById('id_div_container')
        // el: '#id_div_container',
        data: {
            isNeedClass: true,
            isError: true
        },
        methods: {
             
        }
    }).$mount('#id_div_container')
</script>  


        <p class="sgcenter sgcontentcolor">
            <b>注意: 

        </p>

        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>  


效果如下:


上面的是对象语法
下面的是数组语法
我们还可以把一个数组传给v-bind:class, 以应用N个class样式
<div v-bind:class=”[classCenter, classDanger]”
其中data对象中
data: {
classCenter: ‘class_div_center’,
classDanger: ‘class_div_danger’
}
渲染结果为:
<div class=”class_div_center class_div_danger”></div>


在数组语法中,同样可以根据条件进行切换class
<div v-bind:class=”[isNeedCenter?classCenter:”, classDanger]”></div>

这样,只有在 data中的isNeedCenter为true时,才会应用 data中属性为classCenter所对应的值(即class_div_center)


vue_14.html代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="/public/img/beyond2.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="未闻花名-免费零基础教程-beyond">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY,XML,JSON,C,C++,C#,OC,PHP,JAVA,JSP,PYTHON,RUBY,PERL,LUA,SQL,LINUX,SHELL,汇编,日语,英语,泰语,韩语,俄语,粤语,阿语,魔方,乐理,动漫,PR,PS,AI,AE">
    <title>beyond心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="/public/css/beyondbasestylewhite5.css">
    <script type="text/javascript" src="/public/js/nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("/public/img/sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="/public/css/beyondbuttongreen.css">

    <link rel="stylesheet" type="text/css" href="/public/lib/bootstrap/node_52_v337_bootstrap_backup.css">


    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->


    <style type="text/css">
        .class_div_center {
            text-align: center;
            margin:0 auto;
            background: black;
        }
        
        .class_div_danger {
            color: white;
        }
    </style>
    
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        
<!-- 第3步, vue最终渲染结果的容器 -->
<div id="id_div_container" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
             <div v-bind:class="[isNeedCenter?classCenter:'', classDanger]">
                 未闻花名
             </div>
</div>

        <!-- 第1步,导入vue.js -->
<script type="text/javascript" src="/node_modules/vue//dist/vue.js"></script>

        <!-- 第2步,生成一个全新的vue对象实例 -->  
<script type="text/javascript">   
    var appVue = new Vue({
        // el 绑定的id 只能用于非html和非body的标签元素
        // el 还可以 document.getElementById('id_div_container')
        // el: '#id_div_container',
        data: {
            isNeedCenter: true,
            // 数组形式调用
            classCenter: 'class_div_center',
            classDanger: 'class_div_danger'
        },
        methods: {
             
        }
    }).$mount('#id_div_container')
</script>  


        <p class="sgcenter sgcontentcolor">
            <b>注意: v-bind:class的值的数组调用形式
        </p>

        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>  


效果如下:


用在组件上
当在一个自定义的组件上使用class属性时, 这些类将被添加到组件的根元素上
该根元素上已有的class也会被保留

例如:声明组件
Vue.component(‘beyond-component’,{
template: ‘<p class=”class_p_center”>那朵花</p>’
})

然后在使用组件的时候,添加一些class
<beyond-component class=”class_beyond_color”></beyond-component>

最终html渲染结果如下:
<p class=”class_p_center class_beyond_color”>那朵花</p>


vue_15.html 核心代码如下:

<head>
    <style type="text/css">
        .class_p_center {
            text-align: center;
            margin:0 auto;
            background: black;
        }
        
        .class_beyond_color {
            color: white;
        }
    </style>
    
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        
<!-- 第3步, vue最终渲染结果的容器 -->
<div id="id_div_container" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
             <!-- 组件step2.使用组件 -->
             <beyond-component class="class_beyond_color"></beyond-component>
</div>

        <!-- 第1步,导入vue.js -->
<script type="text/javascript" src="/node_modules/vue//dist/vue.js"></script>

        <!-- 第2步,生成一个全新的vue对象实例 -->  
<script type="text/javascript">
    // 组件step1.声明组件
    Vue.component('beyond-component',{
        template: '<p class="class_p_center">那朵花</p>'
    })

    var appVue = new Vue({
        data: {
            
        },
        methods: {
             
        }
    }).$mount('#id_div_container')

    
</script>  


        <p class="sgcenter sgcontentcolor">
            <b>注意: 对组件上的class进行叠加
        </p>


效果如下:


绑定内联样式  指令如下:
v-bind:style
例如:
<div v-bind:style=”{color: beyondColor,  fontSize: beyondFontSize + ‘px’}”>那朵花</div>

data:{
beyondColor: ‘teal’,
beyondFontSize: ’67’
}
注意:
上面的css属性名必须是 驼峰式(camelCase) 或 「-」连接(kebab-case)



示例2: 通常,直接绑定一个样式对象 或许会更好更清楚明了
<div v-bind:style=”beyondStyleObject”></div>

data:{
beyondStyleObject : {
color: ‘teal’,
fontSize: ’67px’
}
}


vue_16.html代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="/public/img/beyond2.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="未闻花名-免费零基础教程-beyond">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY,XML,JSON,C,C++,C#,OC,PHP,JAVA,JSP,PYTHON,RUBY,PERL,LUA,SQL,LINUX,SHELL,汇编,日语,英语,泰语,韩语,俄语,粤语,阿语,魔方,乐理,动漫,PR,PS,AI,AE">
    <title>beyond心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="/public/css/beyondbasestylewhite5.css">
    <script type="text/javascript" src="/public/js/nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("/public/img/sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="/public/css/beyondbuttongreen.css">

    <link rel="stylesheet" type="text/css" href="/public/lib/bootstrap/node_52_v337_bootstrap_backup.css">


    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

<head>
    <style type="text/css">
        #id_div_container {
            text-align: center;
            margin:0 auto;
            background: rgba(0,0,0,0.6);
        }
        
    </style>
    
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        
<!-- 第3步, vue最终渲染结果的容器 -->
<div id="id_div_container" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
             <div v-bind:style="{color: beyondColor,fontSize: beyondFontSize + 'px'}">那朵花</div>

             <div v-bind:style="beyondStyleObject">あの花</div>
</div>

        <!-- 第1步,导入vue.js -->
<script type="text/javascript" src="/node_modules/vue//dist/vue.js"></script>

        <!-- 第2步,生成一个全新的vue对象实例 -->  
<script type="text/javascript">
    

    var appVue = new Vue({
        data: {
            beyondColor: 'white',
            beyondFontSize: 67,
            // 方式2,直接使用一个对象
            beyondStyleObject: {
                color: 'white',
                fontSize: 67
            }
        },
        methods: {
             
        }
    }).$mount('#id_div_container')

    
</script>  


        <p class="sgcenter sgcontentcolor">
            <b>注意: v-bind:style的两种方式
        </p>

        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>  

效果如下:


开发与调试 Vue DevTools 官方提供的浏览器插件

官网地址:  github.com/vuejs/vue-devtools

1.  安装

Clone this repo
1.1  npm install (Or yarn install if you are using yarn as the package manager)
1.2  npm run build
1.3  Open Chrome extension page
1.4  Check "developer mode"
1.5  Click "load unpacked extension", and choose shells/chrome.

如图所示:

cd 到下载下来的解压后的目录

npm install

npm run build

点击 加载已解压的扩展程序 按钮 弹出选择框

选择shells里的chrome目录

安装完成

效果如下:

唯一注意事项就是

要在web服务器环境下使用,才能有Vue调试菜单


注意事项:

  1. If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won’t show up.
  2. To make it work for pages opened via file:// protocol, you need to check “Allow access to file URLs” for this extension in Chrome’s extension management panel.

除了上面的手动安装方式,也可以直接 到 chrome商店搜索安装(该方法需要特殊网络支持)


表单输入绑定
v-model只能用于表单控件上(如input或textarea元素)创建双向数据绑定
该指令可以实现自动智能 更新元素
本质上: 就是监听用户输入事件并同步更新数据

v-model指令会忽略所有表单元素的value、checked、selected属性的初始值,
而是把data对象中的属性作为数据的来源
因此,应该通过data对象 给上面的这些表单元素的属性 赋初始值


注意: 对于使用输入法的语言(如中文、日文、韩文等),v-model不会在输入的过程中进行同步更新,
如果要在这样的特殊情况下做到同步实时更新,请单独使用input事件


双向数据绑定 注意:v-model只能用在表单控件上


修饰符:
如果想将用户输入 自动转成数值类型(默认输入的全都是字符串),
可以给v-model添加 number 修饰符

如果要自动过滤用户输入的首尾空白字符
可以给v-model添加 trim 修饰符

如果只想在change事件中进行数据同步,
而不想每输入一个字符就进行一次数据同步,

可以给v-model添加 lazy 修饰符


演示表单双向绑定的vue_17.html代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="/public/img/beyond2.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="未闻花名-免费零基础教程-beyond">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY,XML,JSON,C,C++,C#,OC,PHP,JAVA,JSP,PYTHON,RUBY,PERL,LUA,SQL,LINUX,SHELL,汇编,日语,英语,泰语,韩语,俄语,粤语,阿语,魔方,乐理,动漫,PR,PS,AI,AE">
    <title>beyond心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="/public/css/beyondbasestylewhite5.css">
    <script type="text/javascript" src="/public/js/nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("/public/img/sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="/public/css/beyondbuttongreen.css">

    <link rel="stylesheet" type="text/css" href="/public/lib/bootstrap/node_52_v337_bootstrap_backup.css">


    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

<head>
    <style type="text/css">
        #id_div_container {
            text-align: center;
            margin:0 auto;
            /*background: rgba(0,0,0,0.6);*/
        }
        .class_div_cube {
            width: 50px;
            height: 50px;
            background-color: black;
        }
        
    </style>
    
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        
<!-- 第3步, vue最终渲染结果的容器 -->
<div id="id_div_container" style="color:#666;padding:10px 10px;border:1px solid Cadetblue;margin:4px;border-radius:8px;">
             <!-- 单向数据绑定 -->
             <input type="text" v-bind:value="girlName" />

             <!-- 双向数据绑定 注意:v-model只能用在表单控件上 -->
             <!-- 修饰符
                    如果想将用户输入 自动转成数值类型(默认输入的全都是字符串), 
                    可以给v-model添加 number 修饰符

                    如果要自动过滤用户输入的首尾空白字符
                    可以给v-model添加 trim 修饰符

                    如果只想在change事件中进行数据同步,
                    而不想每输入一个字符就进行一次数据同步,
                    可以给v-model添加 lazy 修饰符
              -->
             <input type="text" v-model.number.trim.lazy="girlAge" />

             <!-- 多行文本 -->
             <br /><br />
             <textarea v-model="girlDescription"></textarea>

             <!-- 单个复选框 -->
             <br/>
             <input type="checkbox" v-model="isLoli" /> loli {{ isLoli }}

             <!-- 多个复选框 -->
             <div>
                 <input type="checkbox" id="anohana" value="面码" v-model="girlArr"/>
                 <label for="anohana">未闻花名</label>

                 <input type="checkbox" id="leon" value="mathilda" v-model="girlArr"/>
                 <label for="leon">这个杀手不太冷</label>

                 <input type="checkbox" id="tiger" value="逢坂大河" v-model="girlArr"/>
                 <label for="tiger">龙与虎</label>

                 <br/>
                 选中结果: 
                 {{ girlArr }}
             </div>

             <div>
                 <!-- 控制一个div是否可见 -->
                 <!-- 注意第一个是单向绑定 :checked属性 -->
                 <input type="checkbox" v-bind:checked="isVisible"/>
                 <input type="checkbox" v-model="isVisible" />显示/隐藏
                 <div v-if="isVisible" class="class_div_cube">
                     
                 </div>
             </div>

             <!-- 单选按钮 -->
             <div>
                 <input type="radio" id="id_loli" value="loli" v-model="loliOrNot">
                 <label for="id_loli">loli</label>

                 
                 <input type="radio" id="id_not_loli" value="not loli" v-model="loliOrNot">
                 <label for="id_not_loli">not loli</label>

                 
                 <span>选择结果: {{ loliOrNot }}</span>
             </div>


             <!-- 下拉选择框
                  为了兼容iOS,在最上面 推荐提供一个值value为空的禁用选项
              -->
             <div>
                 <select v-model="favouriteAnime">
                     <option disabled value="">最爱的动漫</option>
                     <option>未闻花名</option>
                     <option>龙与虎</option>
                     <option>轻音少女</option>
                 </select>
                 <span>选择结果: {{ favouriteAnime }}</span>
             </div>

             <!-- 复选框
                  当复选框选中时, beyondToggle的值 为 beyondToggleTrueValue
                  当复选框未选中时, beyondToggle的值 为 beyondToggleFalseValue
              -->
             <input type="checkbox" v-model="beyondToggle" 
             v-bind:true-value="beyondToggleTrueValue"
             v-bind:false-value="beyondToggleFalseValue" />
             <span> toggle结果: {{ beyondToggle }}</span>

             <!-- 单选框 -->
             <br/>
             <input type="radio" v-model="beyondRadio"
             v-bind:value="beyondRadioValue">
             <span> radio的结果: {{ beyondRadio }}</span>



</div>

        <!-- 第1步,导入vue.js -->
<script type="text/javascript" src="/node_modules/vue//dist/vue.js"></script>

        <!-- 第2步,生成一个全新的vue对象实例 -->  
<script type="text/javascript">
    var longText = `在我们走过的季节里,路旁盛开的花朵也在不断变化,那个季节盛开的花是叫什么来着?轻轻摇曳着,一碰会微微刺痛,靠近一闻,隐约有股青涩的阳光的气息。那气息渐渐地淡去,我们也在慢慢长大。可是,那朵花一定还在某个地方盛开着……对,我们永远都会继续实现那朵花的愿望。
    `

    var appVue = new Vue({
        data: {
           girlName: "面码",
           girlAge: 15,
           girlDescription: longText,
           isLoli: true,
           girlArr: [],
           isVisible: true,
           loliOrNot: '',
           favouriteAnime: '',

           beyondToggle: true,
           beyondToggleTrueValue: '选中',
           beyondToggleFalseValue: '未选中',

           beyondRadio: true,
           beyondRadioValue: '完成'
        },
        methods: {
             
        }
    }).$mount('#id_div_container')

    
</script>  


        <p class="sgcenter sgcontentcolor">
            <b>注意: 
        </p>

        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>  

效果如下:


v-bind:href=””

v-bind指令  只能用于HTML元素的属性值, 且不能使用Mustache{{ }}

Mustache {{ }} 只用于文本标签


每个绑定 只支持单个表达式, 如果要进行 条件运算 的话, 需改用三元运算符

未完待续,下一章节,つづく