Vue2.0学习笔记2：hello案例

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

学习bilibili课程所做的一些笔记尚硅谷Vue技术

---

一、vue的一些基本知识：

---

二、模板语法

1.插值语法

介绍：
功能：用于解析标签体内容
写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性
示例：

<div id="root">
  {{name}}
</div>
<script type="text/javascript">
  Vue.config.productionTip = false

  new Vue({
    el:'#root',
    data:{
      name:'jack'
    }
  })
</script>

2.指令语法

介绍：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：v-bind：href=“xxx” 或简写为 :href=“xxx” ,xxx同样是js表达式,且可以读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是：v-???，此处v-bind只是一个例子
示例：

<div id="root">
  <a v-bind:href="url" v-bind:x="hello">点击链接跳转腾讯网</a>
  <a :href="url" v-bind:x="hello">点击链接跳转腾讯网</a>
</div>
<script type="text/javascript">
  Vue.config.productionTip = false

  new Vue({
    el:'#root',
    data:{
      url:'http://www.qq.com',
      hello:'你好'
    }
  })
</script>

---

三、数据绑定

1.单向绑定

介绍： （v-bind）：数据只能从data流向页面
举例

<div id="root">
  单向数据绑定：<input type="text" v-bind:value="name">
</div>
<script type="text/javascript">
  Vue.config.productionTip = false

  new Vue({
    el:'#root',
    data:{
      name:'请输入文本'
    }
  })
</script>

2.双向绑定

介绍：（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：
1.双向绑定一般都应用在表单类元素上（如：input，select等）
2.v-model：value 可以简写为v-model，因为v-model默认收集的就是value的
举例

<div id="root">
<!--  v-model只能应用在表单类元素（输入类元素value值）上-->
							  <!--v-model="name"-->
  双向数据绑定：<input type="text" v-model:value="name">
</div>
<script type="text/javascript">
  Vue.config.productionTip = false

  new Vue({
    el:'#root',
    data:{
      name:'请输入文本'
    }
  })
</script>

---

三、el与data的两种写法

1.el的两种写法：

<!--第一种写法-->
<script type="text/javascript">
    Vue.config.productionTip = false
    const v = new Vue({
        el:'#root',
        data:{
            name:'小明'
        }
    })
    
//    console.log(v);
//    v.$mount('#root')

</script>

<!--第二种写法-->
<script type="text/javascript">
    Vue.config.productionTip = false
    const v = new Vue({
        // el:'#root',
        data:{
            name:'小明'
        }
    })
    
    console.log(v);
    v.$mount('#root')	//挂载

</script>

1.data的两种写法：

<script type="text/javascript">
    Vue.config.productionTip = false
    const v = new Vue({
        el:'#root',
        //data的第一种写法 对象式
        data:{
            name:'小明'
        }
    })

</script>

<script type="text/javascript">
    Vue.config.productionTip = false
    const v = new Vue({
        el:'#root',
        // data的第二种写法 函数式
        data:function (){
            console.log("qwer",this)
            return{
                name:'小明'
            }
        }
    })

</script>

如何选择：使用组件时，data必须用函数式，否则会报错
重要原则： 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

---

四、MVVM模型

1.解释：

M：模型：data中的数据
V：视图：模板
VM：视图模型：Vue实例对象

2.发现：

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