十四天学会Vue——Vue核心上篇（（理论+实战）第一天）

一、Vue核心（上篇）

热身tops：选取开发模式

①用于开发模式 我们只需要知道 我们是开发模式，开发模式他会跟你提示代码出现错误的地方以及出错原因，而生产模式比较简洁。
②用于生产模式

1.1 new Vue()实例

了解Vue：Vue 构造函数是 vue.js 框架中用于创建 Vue 实例的核心部分，而 vue.js 框架则是一个包含了这个构造函数以及许多其他功能和工具的完整系统。注：后半句话不太理解，先这样，后面理解后会更新 ！

（1）关于vue实例

1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；创建vue实例语法：new Vue({ 配置对象 })
2. 配置对象包含很多配置项，也就是属性或者方法，常见的如：data，el，methods等。
3. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；如插值语法
4. root容器里的代码被称为【Vue模板】

    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 插值语法 -->
        <h1>hello，{
   
   {
   
   name}}</h1>
    </div>
    <script type="text/javascript">
        //死记硬背：开发的时候写着这个就好了  减少不必要的提示
        Vue.config.productionTip = false
        <!-- 创建vue实例 -->
        new Vue({
   
   
            el: '#root', //el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
            data: {
   
    //data用于存储数据，数据供el所指定的容器去使用，值通常是对象
                name: '哈哈哈'
            }
        }
        )
    </script>

1.2 模板语法

Vue模板语法两大类：插值语法 指令语法

（1）.插值语法

功能：可以解析标签体的内容（标签是html标签）
语法：{ {xxxx}} xxxx是js表达式 可以直接读取data中的所有属性（意味着即使是data中的方法，也可以直接将方法属性插入到模版中，将结果直接返回）；如果data出现多个相同名字的属性，使用多层，需要用点来引用

  <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{
   
   {
   
   name}}</h3>
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue({
   
   
            el: ' #root',
            data: {
   
   
                name: 'jack'
            }
        }) </script>

讲一下vue模版中的JS表达式
vue模版可以直接访问js表达式，这意味着即使是name属性也可是直接访问JS表达式，相当于将name当对象来用

区分js表达式和js代码（语句）在 Vue 的模板中，可以使用 JavaScript 表达式，但不能直接添加 JavaScript 代码块（如
if语句、for循环等）。

因为Vue 的模板是声明式的，意味着你告诉 Vue 你想要什么，而不是如何得到它。

***js表达式 和 js代码(语句)区分***
						1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
									(1). a
									(2). a+b
									(3). demo(1)
									(4). x === y ? 'a' : 'b'
							2.js代码(语句)
									(1). if(){
   
   }
									(2). for(){
   
   }

<!-- 准备好一个容器 -->
    <div id="root">
        <!-- 13:03 -->
        <!-- 函数调用表达式 -->
        <h1>hello，{
   
   {
   
   name.toUpperCase()}},{
   
   {
   
   address}},{
   
   {
   
   Date.now()}}</h1>
    </div>

（2）.指令语法

Vue中指令语法通常是 v-
功能：用于解析标签（包括：标签属性(也就是可以直接对标签属性进行操作)、标签体内容、绑定事件、、、）。
即：不再像插值语法局限标签体内容，可以直接利用data中的数据对标签属性值进行赋值，属性值还可以加上js表达式或者变量；重新给标签设置属性（注意：在data数据中设置好属性和属性值）。

拿v-bind举例：当我使用V-bind指令时，实际上是将html属性的值给绑定在vue实例对象某个数据属性上，这样当vue实例中数据属性的值发生变化，html属性的值也相应发生变化

    <div id="root">
        <!--v-bind:缩写为: -->
        //这里的x实际上是重新给标签设置属性（注意：在data数据中设置好属性和属性值）
            <a v-bind:href='url' :x="hello">去{
   
   {
   
   school.name}}吧</a>