Vue.Js学习笔记《一》

Vue.js 是什么

Vue是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

简单的声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

//html
<div id="app">
  {
    
    { message }}
</div>

// js
var app = new Vue（{
        el:'#app',
        data:{
            message:'Hello Vue'
    }
}）

//结果
Hello Vue

Vue.js官网

Vue安装

• 我使用的开发软件是JetBrains WebStorm
• 利用cmd命令行安装淘宝镜像cnmp
• 然后命令行工具（CLI）

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目，my-project为你的项目名字
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

Vue.js组件中最重要的选项

data：vue对象的数据
methods：vue对象的方法
watch：监听

Vue.js数据渲染

v-text：格式处理了html，渲染数据
v-html：保存了html的结构

模板指令（条件与循环）

v-if：控制切换一个元素时候显示或者隐藏
v-show：通过css内部来控制显示或隐藏

//v-if 示例  html
<div id="app-3">
  <p v-if="seen">显示了吗？</p>
</div>

//js
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

//结果
显示了吗？

渲染循环列表

v-for：可以绑定数组的数据来渲染一个项目列表

//v-for示例  html
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {
    
    { todo.text }}
    </li>
  </ol>
</div>

//js
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
    ]
  }
})

//结果
    1。学习 JavaScript
    2。学习 Vue

事件绑定

//事件监听器
1，v-on：click 
2，@onclick （简写）

//v-on：click示例
<div id="app-5">
  <p>{
    
    { message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

//js
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    btnclick: function () {
    
    
      this.message = this.message.split('').reverse().join('')
    }
  }
})

//结果
Hello Vue.js!   点击逆转消息按钮显示 -> ！sj.euV olleH

属性绑定

v-bind：将这个元素节点的属性和Vue实例保持一致

//v-bind示例
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

//结果
鼠标悬停几秒钟查看此处动态绑定的提示信息！

双向绑定

v-model:它能轻松实现表单输入和应用状态之间的双向绑定。

//v-model示例 -html
<div id="app-6">
  <p>{
    
    { message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

//结果
Hello Vue!

---