1、Vue初识

1 Vue初识

vue 中文官网

学习 vue 的前提，最好是掌握了 HTML、CSS 和 JavaScript 的中级知识

1.1 vue 的引入

1、本地引入

直接从官网下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

**开发版本：**包含完整的警告和调试模式

**生产版本：**删除了警告，33.46KB min+gzip

在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

2、Vue Devtools

在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

当我们调试代码时，查看控制台会发现有一堆提示，提示我们下载devtools能更好的开发

下载好devtools后，在设置——拓展程序——打开开发者模式——将vue_dev_tools.crx拖拽进去

之后在详情中 开启无痕中启用及允许访问文件网址

1.2 HelloWord

1、引入 vue

<script type="text/javascript" src="../js/vue.js"></script>

2、创建 容器

<div id="root">
    <h1>Hello {{address.toUpperCase()}}  {{1+1}}</h1>
</div>

3、创建 vue 实例

<script type="text/javascript">
    Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示

    //  创建 vue 实例
    new Vue({
        // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
        el: '#root', 
        // data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
        data: {
            address: 'China'
        }
    })
</script>

4、小总结

• 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
• root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
• root容器里的代码被称为 Vue模板；
• Vue实例和容器是一对一的关系
• 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
• {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
• 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

1.3 模板语法

容器里面的代码被称为 Vue 模板

1、插值语法

功能：用于解析标签体内容。

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

<!-- 插值语法 -->
<h1>您好，{{school.name}}</h1>

2、指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。

说明：v-bind:href=“xxx” 可以 简写为 :href=“xxx”

<!-- 指令语法 -->
<h1><a v-bind:href="school.address.toUpperCase()">点击我跳转百度1</a></h1>
<h1><a :href="school.address">点击我跳转百度2</a></h1>
<h1>我是，{{name}}</h1>

<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el: '#root',
        data: {
            name: "lisi",
            school: {
                name: "zs",
                address: "https://www.baidu.com"
            }
        }
    })
</script>

1.4 v-bind and v-model

两种都为数据绑定方式

v-bind: 单向绑定(v-bind)：数据只能从data流向页面。

v-model: 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

注意：

• 双向绑定一般都应用在表单类元素上（如：input、select等）

• v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

<div id="root">
    <!-- 普通写法 -->
    <!-- 
	单向数据绑定：<input type="text" v-bind:value="name"><br/>
	双向数据绑定：<input type="text" v-model:value="name"><br/> 
	-->

    <!-- 简写 -->
    单向数据绑定：<input type="password" :value="password">
    <br>
    双向数据绑定：<input type="password" v-model="password">

    <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
    <!-- <h2 v-model:x="name">你好啊</h2> -->
</div>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            name: "zs",
            password: "123"
        }
    })
</script>

1.5 el and data

el: 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。

data:中用于存储数据，数据供el所指定的容器去使用

1、el的两种写法

• new Vue时候配置el属性。

<script>
    const v = new Vue({
        el:'#root', 
        data:{
            name:'123'
        }
    })
</script>

• 通过Vue对象挂载的方式

<script>
    const v = new Vue({
        data:{
            name:'123'
        }
    })
    v.$mount("#root");
</script>

2、data的两种写法

• 对象式

<script>
    const v = new Vue({
        el:'#root', 
        data:{
            name:'123'
        }
    })
</script>

• 函数式

<script>
    const v = new Vue({
        el:'#root', 
        data: function(){
            return{
                name:'123'
            }
        }
    })
</script>

小总结：

• 使用组件时，data必须使用函数式，否则会报错
• 由Vue管理的函数，一定不要写箭头函数（function ()=>），一旦写了箭头函数，this就不再是Vue实例了。

1.6 mvvm模型

M：模型(Model) ：data中的数据

V：视图(View) ：模板代码

VM：视图模型(ViewModel)：Vue实例

<div id="root">
    <h1>学校名称：{{name}}</h1>
    <h1>学校地址：{{address}}</h1>
    <h1>测试一下1：{{1+1}}</h1>
    <h1>测试一下2：{{$options}}</h1>
    <h1>测试一下3：{{$emit}}</h1>
    <h1>测试一下4：{{_c}}</h1> 
</div>

<script>
    const vm = new Vue({
        el:'#root',
        data:{
            name:'hello',
            address:'北京',
        }
    })
</script>

小总结：

• data中所有的属性，最后都出现在了vm身上。

• vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。