vue基础学习

vue的基础学习 持续增加新内容 

首先是对于vue的认识 在刚开始阶段对于前端接触较少 对于vue这种前端框架不是很明白 

随手记下学习的知识 

从最基础的开始 创建vue的对象 

let vue =new vue({

   el:'#app'

});

el是一个必不可少的选项，用来指明vue实例的挂载目标

通过创建的实例对象对于内容区域进行指定

<div id="app">

       <p>{ {hello}}</p>

</div>

对于vue的mvvm模式的理解 首先M指的是后端传输过来的数据，V是指所构建出来的页面布局，VM则是指链接M和v之间的桥梁，是一个双向的通路，可以将M转化为V，就是将后端传输的数数据转化为页面，同样也可以将V转化为M，将显示的页面布局转化为后端数据。

接下来是vue中比较常用到的功能也就是指令

指令是一种以v-开头的自定义标签属性

首先是常见的文本属性 v-text

<span v-text="word"></span>

文本内容是word指代的数据 显示出来的是word的指代的内容：hello world

需要注意的是 在使用v-text标签时会覆盖原本的内容

<span v-text='word'>vue</span>在这种情况下不会显示处vue 只会单纯的显示出word的内容

v-html 在应用中对于html的内容需要使用v-html进行指定 否则不能使用html带的指令内容

<div id="app" v-html="word"></div>

<script>

   let vue =new Vue({

         el :'#app',

         data:{

                 word:"<h2>hello vue</h2>"

             }

      });

</script>

这样就能够让word中的内容以html的h2格式显示出来

v-bind 更新html元素的属性 

<img v-bind:src="url">

• .prop- 绑定为 DOM 属性而不是属性（有什么区别？）。如果标签是一个组件，那么.prop将在组件的$el.
• .camel - (2.1.0+) 将kebab-case 属性名称转换为camelCase。
• .sync- (2.3.0+) 一种语法糖，它扩展为v-on用于更新绑定值的处理程序

实际使用中