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

本文链接：https://blog.csdn.net/pre_eminent/article/details/80044491

这篇博客介绍了Vue.js的模板语法，包括数据绑定、指令如v-if、v-for、v-on和v-model，以及表单控件的双向数据绑定。还讲解了Vue DevTools的安装和使用，帮助开发者更好地理解和调试Vue应用。此外，提到了Vue实例的生命周期和组件化思想。

摘要由CSDN通过智能技术生成

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对象上添加响应式属性了.