Vue 的简单入门理解

一.

angular适合很大的项目mvvm，react干什么都行的组件式，vue是个轻量级mwwm适合中小型应用。

感觉react全家桶未来应该会走红，中小项目里vue会是不错的选择，angular在版本稳定下来之前还是先观望吧。。

顺便说下上手难度，vue不难（只要不是一上来就webpack，cli），angular1.x也不难（2.x没用过，感觉改的有点多，等版本相对稳定再说），react曲线感觉难一点点。

火大概是raect>angular>vue的，但angular在降温，react在继续上升，vue也在上升期。

官网： http://vuejs.org/ （可选中文版）

Api : https://cn.vuejs.org/v2/api/

文章：http://www.wtoutiao.com/p/6e4lwMF.html

个人案例：http://web.jobbole.com/89976/

官网vue资料总结：

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

与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。

另一方面，Vue 完全有能力驱

动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

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

vue 内部封装好的参数，函数：

var vm = new Vue({

el: “选择器”, 挂载到页面的那个元素里，即确定vue的作用范围外部可通过vm.$el访问，得到的是一个原生dom元素，可进行对应操作

a: ”, //自定义属性外部可通过vm.$options访问
data: { }, //实例属性都在这里面，外部通过实例名,即vm.$data调用

computed: { }, //计算属性，也是实例属性，只是以方法的形式存在，并可以有逻辑运算的属性

method: { }, //实例方法都在这里

watch: { }, //对data和computed的属性进行监听，当属性有变化时自动触发，以方法的形式存在外部通过$.watch调用

created: function(){ 实例已经创建 }

beforeCompile: function(){ 模块编译之前 }

compiled: function(){ 模块编译之后；即模板占位符被是内容替换}

ready: function(){ 模板插入到文档中了；相当于window.onload }

beforeDestroy: function(){ 对象销毁之前 }

destroyed: function(){ 对象销毁之后 }

});

注意：

①以上属性和方法，实例内部都通过this调用,外部则通过对应的实例方法访问

②在vue的生命周期过程中，它自身还提供了一系列的钩子函数供我们使用，进行自定义逻辑的注入

③以上4个方法在对象被实例化后即按顺序执行，以下2个方法需通过事件触发，并通过调用实例名.$destory()才执行

二.

代码： ①按照平常的html页面写（第一个例子引入jq，后面都不需要jq）

②同时引入 vue.js ，以及就专门的vue使用语法

（vue.js 地址： https://unpkg.com/vue/dist/vue.js）

1.第一个例子： hello vue

<body>

  {{ message }}
  </div>
<script src=“../js/jquery-1.8.2.min.js”></script>
<script src=“../js/vue.js”></script>
<script>
  $(function(){
  var app = new Vue({
  el: ‘#app’,
  data: {
  message: ‘Hello Vue!’
  }
})
  app;
  console.log(app.$data);
})
</script>
</body>

console.log(app.$data);

注意： ①在控制台更改message的值，页面中的值也会随着变化

② 只在第一次打印hellovue时：app 需要再执行一次，页面才能显示输出message的值，

③输出 app message信息时，html页面内 {{message}} 要写在 el 所代表的 id 标签内部

三.

1.v-bind 指令：控制台显示message信息已添加上新内容，但是没显示出来

指令带有前缀 v-，以表示它们是 Vue.js 提供的特殊属性

<div id=“app-2”>
<span v-bind:title=“message”> 在原有内容基础上添加新内容 </span>
<p> {{message}}}</p> <!–js新增内容 Tue Feb 07 2017 15:31:58 GMT+0800 (中国标准时间)}–>
</div>

注意：

①console.log(app2.$data)

②console.log(app2.message);

四.

1.v-if

app3: seen:true 显示p标签内容

app3 seen: false 隐藏p标签内容

注意：这个例子演示了我们不仅可以绑定 DOM 文本到数据，

也可以绑定 DOM 结构到数据

1.v-for

var app4 = new Vue({
  el: ‘#app-4’,
  data: {
  todos: [
{ text: ‘Learn JavaScript’ },
{ text: ‘Learn Vue’ },
{ text: ‘Build something awesome’ }
]
}
})
})
</script>

输出： console.log(app4.todos.push({ text: ‘New item’ }))

发现： ul列表又添加了一行数据

五.

1.v-on : click=“函数（方法）名”

<div id=“app-5”>
<p>{{ message }}</p>
<button v-on:click=“reverseMessage”>Reverse Message</button>
</div>

触发事件前 触发事件后

2.v-on : click=“函数（方法）名”

<div id=“app”>
<button v-on:click=“counter += 1”>增加 1</button>
<button v-on:click=“counter -= 1”>减少 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

2.v-on : click=“函数（方法）名”

<button v-on:click=“greet”>Greet</button>

var app = new Vue({
  el: ‘#app’,
  data: {
  counter: 0,
  info: “hello world”
  },
  methods: {
  greet: function(event){
  alert(this.info)
}
}
})

注意：methods 有 s,不然会报错（greet not defined）

2.v-on :keyup.键名=”函数名”

methods: {
  greet: function(event){
  alert(this.info)
},
  say: function(msg){
  alert(msg);
},
  warn: function (message, event) {
  // 现在我们可以访问原生事件对象
  console.log(event)
  if (event) event.preventDefault()
  alert(message)
},
  submit: function(){
  console.log(“按键13触发”)
}
}

全部的按键别名：

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

六.

添加id，属性href,disabled等 – javascript语句判断 – 事件绑定 – 过滤器

1.v-model ：输入框的内容改变，p标签的内容也随之改变。

<div id=“app-6”>
<p>{{ message }}</p>
<input v-model=“message”>
</div>

2.v-once ： 一次加载后台数据改变页面显示内容也不再改变

<body>
<div class=“app”>
  message: {{message}}
  <p v-once>This will never change: {{ msg }}</p>
</div>
<script src=“../js/vue.js”></script>
<script>
  var app = new Vue({
  el: “.app”,
  data: {
  message: “hello vue”,
  msg: “v-once 一次加载不再改变”
  }
})
  console.log(app)
</script>

效果图如下：

3.v-html ：添加一个html标签片段

v-html=”data 数据变量名”

4.v-bind:id=”data参数名” ：添加id值

v-bind:disabled=”data参数名” ：添加disabled属性

<body>
<div class=“app”>
  message: {{message}}
  <p v-once>This will never change: {{ msg }}</p>
<div v-html=“rawHtml”></div>
<div v-bind:id=“dynamicId”>v-bind:id  添加id值 </div>
<button v-bind:disabled=“someDynamicCondition1”>Button: v-bind:disabled=”false”</button>
<button v-bind:disabled=“someDynamicCondition2”>Button: v-bind:disabled=”true”</button>
</div>
<script src=“../js/vue.js”></script>
<script>
  var app = new Vue({
  el: “.app”,
  data: {
  message: “hello vue”,
  msg: “v-once 一次加载不再改变”,
  rawHtml: “<span>添加html标签片段</span>”,
  dynamicId: “d1”,
  someDynamicCondition1: false,
  someDynamicCondition2: true
  }
})
  console.log(app.$data)
</script>

效果图如下：

5.使用javascrpt 表达式

表达式限制：每个绑定都只能包含单个表达式

效果图如下：

注意： javascript 可以直接使用 Data,Math

<div class=“app”>
<p>number初始值为1： {{number+1}}</p>
<p>ok状态：{{ ok ? ‘YES’ : ‘NO’ }}</p>
<p>message字符处理,初始值abcd：{{ message.split(”).reverse().join(‘-‘) }}</p>
<div v-bind:id=“‘list-‘ + id”>v-bind:id=”‘list-‘ + id”</div>
<p>{{Math.PI}}</p>
<p>{{new Date().getHours()+”:”+new Date().getMinutes()+”:”+new Date().getSeconds()}}</p>
<p>{{time}}</p>
</div>
<script src=“../js/vue.js”></script>
<script>
  var time = new Date().getHours()+”:”+new Date().getMinutes()+”:”+new Date().getSeconds();
  var app = new Vue({
  el: “.app”,
  data: {
  number: 1,
  ok: true,
  message: “abcd”,
  id: “d1”,
  time: time,
  someDynamicCondition1: false,
  someDynamicCondition2: true
  }
});
  console.log(app.$data,Math.PI, time)
</script>

6.v-bind:href=”url” 链接

<a v-bind:href=“url” v-bind:target=“target”>国融证券官网</a>

url: “http://www.grzq.com/osoa/views/index.html”,
target: “_blank”

注意： v-bind:href=”url”

这里的url 不能直接写成跳转地址，不然会报错。

7.v-on:submit.prevent=”函数名”

<form v-on:submit.prevent=“onSubmit”>
<button type=“submit”>提交</button>
<span>{{iptstate}}</span>
</form>

var app = new Vue({
  el: “.app”,
  data: {
  number: 1,
  ok: true,
  message: “abcd”,
  id: “d1”,
  time: time,
  url: “http://www.grzq.com/osoa/views/index.html”,
  target: “_blank”,
  iptstate: “”,
  onSubmit: function(e){
  console.log(“onSubmit表单提交”);
  this.iptstate = “onSubmit表单提交”;
}
}
});

效果图如下：点击提交按钮触发函数

8.filter 过滤器

capitalize 已经被移除，需要的话得自己封装方法

七.自定义组件（标签）： todo-item

<body>
<div id=“app-7”>
<ol>
  <!– Now we provide each todo-item with the todo object   –>
<!– it’s representing, so that its content can be dynamic –>
  <todo-item v-for=“item in groceryList” v-bind:todo=“item”></todo-item>
</ol>
</div>
<script src=“../js/vue.js”></script>
<script>
  Vue.component(‘todo-item’, {
  props: [‘todo’],
  template: ‘<li>{{ todo.text }}</li>’
  })
  var app7 = new Vue({
  el: ‘#app-7’,
  data: {
  groceryList: [
{ text: ‘Vegetables’ },
{ text: ‘Cheese’ },
{ text: ‘Whatever else humans are supposed to eat’ }
]
}
})
</script>
</body>

八.

注意：只有这些被代理的属性是响应的。

如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

created 这个钩子在实例被创建之后被调用

var vm = new Vue({
  data: {
  aa: 1
  },
  created: function () {
  // `this` 指向 vm 实例
  console.log(‘aa is: ‘ + this.aa); // aa is: 1
}
})

九.

1.判断添加 class: active

isActive : true 添加active

false 不添加active

<body>
<div class=“test”>
<div v-bind:class=“{ active: isActive1 }”>div1</div>
<div v-bind:class=“{ active: isActive2 }”>div2</div>
</div>
<script type=“text/javascript”>
  var myVue = new Vue({
  el: “.test”,
  data: {
  isActive1: true,
  isActive2: false,
  rawId: “ID1”,
  formatId: “id2”
  }
})
</script>
</body>

2.添加多个class (只要为true,就会添加)

3.class 绑定在一个对象里

var myVue = new Vue({
  el: “.test”,
  data: {
  isActive1: true,
  isActive2: false,
  hasError: true,
  rawId: “ID1”,
  formatId: “id2”,
  classObject: {
  active: true,
  ‘text-danger’: true
  }
}
})

4.class 包含在数组里

5.class 三元表示

var myVue = new Vue({
  el: “.test”,
  data: {
  activeClass: ‘active’,
  errorClass: ‘text-danger’
  }
})

6.添加绑定 style 样式

<div class=“test”>
<div v-bind:style=“styleObject”>添加style样式对象</div>
</div>
<script type=“text/javascript”>
  var myVue = new Vue({
  el: “.test”,
  data: {
  styleObject: {
  color: “#fff”,
  backgroundColor: “blue”
  }
}
})
</script>

7.多个style样式

var myVue = new Vue({
  el: “.test”,
  data: {
  styleObject: {
  color: “#fff”,
  backgroundColor: “blue”
  },
  baseStyles: {
  color: “#fff”,
  backgroundColor: “blue”
  },
  otherStyles: {
  border: “2px solid red”,
  margin: “10px”
  }
}
})

8.css3 过渡效果

<!DOCTYPE HTML>
<html>
<head>
<title>vue简单例子</title>
<meta charset=“UTF-8”/>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
  }
.fade-enter, .fade-leave-active {
  opacity: 0
  }
</style>
</head>
<body>
<div id=“app”>
<button v-on:click=“show = !show”>
  Toggle
  </button>
<transition name=“fade”>
<p v-if=“show”>hello</p>
</transition>
</div>

十.

1.简单的条件渲染

<div class=“test”>
<h1 v-if=“ok”>Yes</h1>
<h1 v-if=“no”>no</h1>
<h1 v-else>其他</h1>
</div>
<script type=“text/javascript”>
  var myVue = new Vue({
  el: “.test”,
  data: {
  ok: true,
  no: false
  }
})
</script>

2.条件组

v-if v-else-if v-else

2.js数组过滤

data: {
  items: [
{message: ‘Foo’ },
{message: ‘Bar’ }
],
  msg: [
{message: ‘Foo’ },
{message: ‘Bar’ }
],
  arr: [1,2,3,46,6],
  object: {
  FirstName: ‘John’,
  LastName: ‘Doe’,
  Age: 30
  },
  numbers: [ 1, 2, 3, 4, 5, 6 ]
},
computed: {
  evenNumbers: function () {
  return this.numbers.filter(function (number) {
  return number % 2 === 0
  })
}
}

十一.

1.复选框：根据选择实时显示选中内容，

选中就在数组中添加内容，取消选中就在数组中删除数据

<div id=“app”>
<input type=“checkbox” id=“jack” value=“Jack” v-model=“checkedNames”>
<label for=“jack”>Jack</label>
<input type=“checkbox” id=“john” value=“John” v-model=“checkedNames”>
<label for=“john”>John</label>
<input type=“checkbox” id=“mike” value=“Mike” v-model=“checkedNames”>
<label for=“mike”>Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>

</script>

注意：单选框，下拉框同样如此。

单选框：

<input type=“radio” id=“one” value=“One” v-model=“picked”>
<label for=“one”>One</label>
<br>
<input type=“radio” id=“two” value=“Two” v-model=“picked”>
<label for=“two”>Two</label>
<br>
<span>Picked: {{ picked }}</span>

下拉框：

<select v-model=“selected”>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>

默认选中的下拉框：

<select v-model=“selected2”>
<option v-for=“option in options” v-bind:value=“option.value”>
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected2 }}</span>

data: {
  checkedNames: [],
  picked: [],
  selected: [],
  selected2: ‘A’,
  options: [
{ text: ‘One’, value: ‘A’ },
{ text: ‘Two’, value: ‘B’ },
{ text: ‘Three’, value: ‘C’ }
]
}

文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/66463.html

Vue 的简单入门理解

相关推荐