“Vue2.0”跟俺一起全面入坑 01

ps:补充一个关于console知识点。
  1. console.dir()可以显示一个对象所有的属性和方法。例如:console.dir(document);就可查看文档对象(document树)下所有的东西。
  1. 测试一段代码执行时间
console.time('test')
/* 这里运行待测代码 */
console.timeEnd('test');;

前言:Vue主要是“面向数据”编程。当数据发生改变时使用虚拟DOM来更改某一DOM节点,避免将整个页面渲染..

一、第一个Vue(读音:view)

首先在在Vue官网下载vue.js文件。

/* html代码,view层,模板 */
   <div id="app">
        {{ message }}
    </div>
/* 引入相关文件,然创建实例,在实例中写各种方法就ok了 */
<script src="vue_2.2.0.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        let data = {
            message: 'hello,Vue'
        }
      //vm实例
        var vm = new Vue({
            el: '#app',  //挂载元素
            data: data
        });
    },false);
</script>

Vue特色—数据双向绑定:数据模型(model)与视图(view)组件的自动同步。

涉及到知识点:指令 v-model=""
<div id="app">
   <input type="text" placeholder="请输入" v-model="message" /> /* 将message绑定到当前元素并监听其变化 */
   <br />
   <p>数据:{{ message }}</p>
</div>
<script src="vue_2.2.0.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello,Datura!!!'
            }
        });
    },false);
</script>

二、Vue实例

Vue实例,每一个应用都是通过Vue这个构造函数创建根实例(root instance)启动New Vue(选项对象)。需要传入选项对象,对象包含挂在元素,数据,模板、方法等。
el:挂载元素选择器 --- String|HtmlElement
data:代理数据 --- Object|Function
methods:定义方法 --- Object
Vue代理data数据,每个vue实例都会代理其data对象里所有的属性,这些被代理的属性是响应的。新添加的属性不具备响应功能,改变后不会更新视图。
Vue实例自身属性和方法,暴露自身的属性和方法,以“$”开头的,例如:$el、$data。。。

    var vm = new Vue({
       el: '#app',
       data: {
          message: 'hello,Datura!!!'
        },
        methods: {
            test (){
                alert(1);
            }
        },
        compontents:{
        //这里存放组件
        }
     });
  /* vm就是new出来的实例 */
  console.log(vm.$data);//也就是数据data,后面还有很多挂载在vm(new出来的)实例上的属性

三、声明式渲染

1. 声明式

只需要声明在哪里(where)做什么(what),而无需关心如何实现(how)

2. 命令式

需要具体代码表达在哪里(where)做什么(what),如何实现(how)

例子:求数组中每一项的倍数
命令式:使用for循环拿出每一项,然后计算完成后,再放到另一个数中

      //定义一个新的空数组,然后利用for循环,每一步每一步地放入其中
      var arrNew = [];
        for (var i=0;i<arr.length;i++){
            arrNew.push(arr[i]*2);
      }

声明式:使用es6的map方法,关注如何取值

    //将原数组(arr)中利用map函数,传入每一项
        var arrNew = arr.map(function (item) {
            return item*2
        })
3. 声明式渲染

初始化根实例,vue自动将数据绑定在DOM模板上
所以可以看出数据在vue实例中定以,在利用“{{ xxx }}”模板中展示。具体怎么过去的我们不关注

四、Vue指令

什么是指令
是一种特殊的自定义行间属性(也就是在html标签内写);指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上,在Vue中,指令以“v-”开头
Vue中的内置指令:点击查看更多

v-bind:动态绑定数据。简写为“:” 。=> 以后的:class="{red:boolean}"
v-on :绑定时间监听器。简写为“@”,例:@click="xxx";
v-text :更新数据,会覆盖已有结构。类似{{ msg }} ;
v-show :根据值的真假,切换元素的display属性;
v-if :根据值的真假,切换元素会被销毁、重建; => 在dom中已消失
v-else-if :多条件判断,为真则渲染;
v-else :条件都不符合时渲染;
v-for :基于源数据多次渲染元素或模块;
v-model :在表单控件元素(input等)上创建双向数据绑定(数据源);
v-pre :跳过元素和子元素的编译过程;
v-once :只渲染一次,随后数据更新也不重新渲染;
v-cloak :隐藏未编译的Mustache语法,在css中设置[v-cloak]{display:none;}

五、Vue模版

1. html模版

html模版:基于DOM的模版,模版都是可解析的有效的HTML
插值
文本:使用“Mustache”语法(大括号){{ value }};作用:替换实例上的属性值,当值改变时,插值内容会被自动更新。也可使用v-text="value"代替。
<p>{{ value }}<p> 等价于 <p v-text="value"></p>
原生的html:双大括号输出的文本,不会解析html标签。也就是说当实例的data为html标签时,不能解析而是直接输出出来。此时如想要解析,可使用v-html="value"代替。

new Vue({
    data:{
        value: `<span>我是一个span标签</span>`
    }
});
<p>{{ value }}<p>   页面展示  =>  <span>我是一个span标签</span> 
<p v-html="value"><p>   页面展示  =>  我是一个span标签 

需要注意的是,有时候因为一些网络延迟等原因,用户会在也买年中先看到{{ xxx }},然后才有数据。我们若想避免此效果,可用v-text="xxxx"代替
属性:使用v-bind进行绑定,可以响应变化。
<h2 :class="{red:show}">标题</h2> => 注意此处的show为data内的一个布尔值数据,若真则添加red的class,若假则移除red的class,
使用javascript表达式:可以写简单的表达式。(可以简单的三目运算,但是不可以写if语句),以后会有计算属性。
{ 1+2 }
{ true? "yes":"no" }

2. 字符串模版
template字符串

tempalte => 选项对象的属性
模版将会替换挂载的元素。挂载元素的内容都会被忽略,根节点只有一个,将html结构写在一对script标签中,设置type="x-template"。

<body>
    <div id="box">

    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        var str = '<h2>hello pink!</h2>'
        var vm = new Vue({
            el: '#box',
            template: str
        });
    },false);
</script>

看图:


说明权重比较高,直接“代替”挂载点,把原来的html替换后显示。
//代码片段这个就是利用script标签对内定义模版,局限性:不能跨文件使用,一个页面中可以使用
<body>
    <div id="box">

    </div>
</body>
<script src="vue.js"></script>
<script type="x-template" id="str">
    <p>我是一个p标签</p>
</script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        var vm = new Vue({
            el: '#box',
            template: '#str'
        });
    },false);
</script>
//代码片段放在template标签里,并给一个id名
<body>
    <template id="tem">
        <p>我是template</p>
    </template>
    <div id="box">

    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        var vm = new Vue({
            el: '#box',
            template: '#tem'
        });
    },false);
</script>
3. 模版—render函数

render函数很接近编辑器
render => 选项对象属性

createElement(标签名,[数据对象],子元素);
<div class="msg">
    Hello,Datura!
</div>
<!-- 是由下面js代码转化而来 -->
render(h) {
  return h(
    'div',
    {class:'msg'},
    {' Hello,Datura!'}
  )
}

数据对象属性
class: {}, => 绑定class,和v-bind:class一样的API
style: {}, => 绑定样式,和v-bind:style一样的API
attrs: {}, => 添加行间属性
domProps: {}, => DOM元素属性
on: {}, => 绑定事件
nativeOn: {}, => 监听原生事件
directives: {}, => 自定义指令
scopedSlots: {}, => slot作用域
slot: {}, => 定义slot名称 和组件有关系,插曹
key: "key", => 给元素添加唯一标识
ref: "ref", => 引用信息

Ex:

  <style>
        .bg{
            background-color: yellow;
        }
  </style>
<body>
    <div id="box">

    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        var vm = new Vue({
            el: '#box',
            render(createrElement) {//和原生创建的元素有区别的
                return createrElement(//首先调用一个函数
                    "ul",
                    {
                        class:{bg:true},//给UL添加dom属性和绑定事件等,就是v-bind:class="{bg:true}"
                        style:{fontSize:"50px"},
                        attrs:{
                            abc:"Datura"
                        },
                        domProps:{
                            innerHTML:"<li>我是html</li>"  //这个权重高,写了这个下面创建的li就都无效了
                        }
                    },
                    [
                        createrElement("li",1),//再次调用createrElement(),设置内容数据是1
                        createrElement("li",2),
                        createrElement("li",3)
                    ]
                );
            }
        });
    },false);
</script>

效果如图:这个就是用domProps:{}来设置ul的内容


效果如图:这个就是用 createrElement()生成元素

未完待续...

推荐阅读更多精彩内容