前端学习 Vue笔记 DLC-CFANZ编程社区

1.1 搭建Vue开发环境

项目导入开发版本文件

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

浏览器安装插件Vue Devtools
去除Vue版本提示

<script>
	Vue.config.productionTip = false
</script>

1.2 Hello案例

在根目录放置 favicon.ico 文件即可在标签中显示

一般推荐在配置结束后再开始 Vue 组件

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

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>Hello,{{name}},{{Date.now()}}</h1>
    </div>

    <script>
        Vue.config.productionTip = false
        // 创建Vue实例
        new Vue({
            el: '#root',
            data: {
                name: 'HMS Home'
            }
        })
    </script>
</body>

1.3 模板语法

插值语法

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

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

指令语法

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

写法：v-???=“xxx”，xxx同样要写js表达式

<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>Hello,{{name}}</h3>
        <hr>
        <h1>指令语法</h1>
        <a :href="school.url">{{school.name}}的博客</a>
    </div>
</body>

<script>
    Vue.config.productionTip = false
    new Vue({
        el: '#root',
        data: {
            name: "HMS Home",
            school: {
                name: "HMS Home",
                url: "https://blog.csdn.net/Winchester_Y?spm=1010.2135.3001.5421"
            }
        }
    })
</script>

1.4 数据绑定

Vue中有2种数据绑定的方式：

单向绑定（v-bind）：数据只能从data流向页面
双向绑定（v-model）：数据会 data<=>页面

双向绑定只能运用在表单类元素上（如：input、select等）
v-model:value可以简写为 v-model，因为v-model默认收集的就是value值

<body>
    <div id="root">
        <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name"> -->
        单向数据绑定：<input type="text" :value="name"><br>
        双向数据绑定：<input type="text" v-model="name">
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el: '#root',
        data: {
            name: 'HMS Home'
        }
    })
</script>

1.5 el和data的两种写法

el有2种写法
1. new Vue时配置el属性
2. 先创建Vue实例，再通过xxx.$mount(‘#root’)指定el值
data有2种写法
1. 对象式
2. 函数式
  
  学到组件时,data必须使用函数式，否则会报错
一个重要的原则

由Vue管理的函数，一定不要写箭头函数

<body>
    <div id="root">
        你好，{{name}}
    </div>
</body>
<script>
    Vue.config.productionTip = false
    // const v = new Vue({
    //     // el: '#root',
    //     data: {
    //         name: 'HMS Home'
    //     }
    // })
    // console.log(v);
    // v.$mount('#root')
    new Vue({
        // data的第一种写法：函数式
        el: '#root',
        // data: {
        //     name: 'HMS Home'
        // }
        data: function () {
            return {
                name: 'HMS Home'
            }
        }
    })
</script>

1.6 MVVM模型

M：模型（model）：data中的数据
V：视图（View）：模板代码
VM：视图模型（ViewModel）：Vue实例

观察发现

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