vue.js学习笔记（一）

一.Vue.js介绍

Vue.js是一个js插件

官方解释：

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

个人理解：

通过操作js对象来操作dom对象。

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

二.vue.js基础

扫描二维码关注公众号，回复： 1728186 查看本文章

1.绑定dom

js中的methods 用于定义的函数，可以通过 return 来返回函数值。

el绑定div

data绑定数据

html中的 {{ }} 用于输出对象属性和函数返回值。

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>

2.js对象值发生改变，相关渲染页面的值会自动变化

专业术语：当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<button type="button" onclick="editData()" >url改变成www.zhaofengdeng.com</button>
<button type="button" onclick="editData2()" >site改变成赵丰登</button>
<script type="text/javascript">
	var v_dev_data={  site: "菜鸟教程",
            url: "www.runoob.com"};
    var vm = new Vue({
        el: '#vue_det',
        data:v_dev_data,
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
	function editData(){
	     v_dev_data.url="www.zhaofengdeng.com";
	}
	function editData2(){
	    v_dev_data.site="赵丰登";
	}
</script>

3.取vue的属性，取值

vm.$data

vm是vue对象，$是指定的，data是属性的对象

vm.$data是一个js data对象

vm.$el是domcument对象，等同于document.getElementById('vue_det'))

<body>
	<div id="vue_det">
		<h1>site : {{site}}</h1>
		<h1>url : {{url}}</h1>
		<h1>Alexa : {{alexa}}</h1>
	</div>
	<script type="text/javascript">
	// 我们的数据对象
	var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
	var vm = new Vue({
		el: '#vue_det',
		data: data
	})

	document.write(vm.$data === data) // true
	document.write("<br>") // true
	document.write(vm.$el === document.getElementById('vue_det')) // true
	</script>
</body>

4.绑定html语言v-html

渲染页面的文本包含html

1.html是文字

2.html是html语言

使用{{}}是文字
<div id="vue_dev_1">
  Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
  <div> {{msg}}</div>
</div>
<br /><br /><br />
使用 v-html=""是html语言
<div id="vue_dev_2">
   Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
   <div v-html="msg"></div>
</div>

<script type="text/javascript">
	var v_dev_data={ 
		msg: "<h1>Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。</h1>"
		};
    var vm1 = new Vue({
        el: '#vue_dev_1',
        data:v_dev_data,
    });
	  var vm2 = new Vue({
        el: '#vue_dev_2',
        data:v_dev_data,
    });
</script>

5.绑定class,v-bind

判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

使用v-model绑定js对象在值，网页发生变更，js对象的属性值会发生bian

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
  <br><br>
  <div v-bind:class="{'class1': class1}">
    directiva v-bind:class
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      class1: false
  }
});
</script>

6.v-if判断显示隐藏，也可以使用v-else 、v-else-if

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

7. v-model 指令来实现双向数据绑定

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

8. v-for使用
简单迭代list

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

模板中使用 v-for：

<ul>
  <template v-for="site in sites">
    <li>{{ site.name }}</li>
    <li>--------------</li>
  </template>
</ul>

v-for 迭代对象 v-for 可以通过一个对象的属性来迭代数据

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

v-for 也可以循环整数

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

9.计算computed

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

var vm = new Vue({

  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

vue.js学习笔记（一）

猜你喜欢