vue.0.0.

最新推荐文章于 2023-03-09 17:29:28 发布

北乎下周

最新推荐文章于 2023-03-09 17:29:28 发布

阅读量186

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_49393290/article/details/120009666

版权

听闻vue很久了，虽然之前大致看了看，但是没看明白

然后之前写了这么长时间的小程序，给你的其实是很好的思维。但是现在上班了，公司的项目就是基于vue来进行开发的。所以现在被迫看vue语法了。

VUE的安装

1、独立版本

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

下载 Vue.js

2、使用 CDN 方法

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

tips：“CDN是指内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡，内容分发，调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。”

vue的第一个程序 hello word

<html>
<head>
<title>my first vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var app=new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>
</body>
</html>

之前学js的时候学到dom这一节就有点疲惫了，没继续往下看了，现在您自己看吧。了解dom有多重要。

来吧，再来复习一遍。

什么是dom？

DOM，全称 Document Object Model 文档对象模型。
JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
文档：文档表示的就是整个的HTML网页文档。
对象：对象表示将网页中的每一个部分都转换为了一个对象。
模型：使用模型来表示对象之间的关系，这样方便我们获取对象。

vue例子代码2

<html>
<head>
<title>my first vue app</title>

<script src="https://unpkg.com/vue"></script>

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

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


</script>

</body>
</html>

效果是您把鼠标放在“ 鼠标悬停几秒钟查看此处动态绑定的提示信息！”这里，会出现

这里我们遇到了一点新东西。你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。

控制切换一个元素是否显示也相当简单：

vue例子3

<html>
<head>
<title>my first vue app</title>

<script src="https://unpkg.com/vue"></script>

</head>
<body>
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>

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


</script>

</body>
</html>

继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。

Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。

vue例子4

<html>
<head>
<title>my first vue app</title>

<script src="https://unpkg.com/vue"></script>

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

<script>
var app4 = new Vue({
  el: '#app-4',
  data: {
   todos:[
{text:'学习javascript'},
{text:'学习vue'},
{text:'整个牛项目'}
]
  }
})


</script>

</body>
</html>

<ol> 标签定义了一个有序列表. 列表排序以数字来显示。

使用<li> 标签来定义列表选项。

在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

vue例5

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

<html>
<head>
<title>my first vue app</title>

<script src="https://unpkg.com/vue"></script>

</head>
<body>
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>

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


</script>

</body>
</html>

注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

1、split('') 把一个字符串分割成字符串数组

把数据拆分为一个数组,括号里的' '是把数据拆分为每个字符串

2、reverse() 颠倒数组中元素的顺序

只作用于数组，跟在split('')后才能起作用，在一个字符串后面不起作用，如message.reverse()

3、join('') 把数组中的所有元素放入一个字符串

所以，message.split('').reverse().join('') 意思是把字符串翻转重组成字符串

hello→olleh

vue案例6

注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<html>
<head>
<title>my first vue app</title>

<script src="https://unpkg.com/vue"></script>

</head>
<body>
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>

<script>
var app6 = new Vue({
  el: '#app-6',
  data: {
message:'Hello Vue.js!'
  }

})


</script>

</body>
</html>

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

您看官方文档

注意:全局组件可以在任意的vue实例中使用，这样就可以实现代码的复用的好处了。

在 Vue 中注册组件很简单：

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

var app = new Vue(...)

现在你可以用它构建另一个组件模板：

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 prop：

Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义 attribute。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

现在，我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中：

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

蔬菜
奶酪
随便其它什么人吃的东西

vue案例7

<html>
<head>
<title>my first vue app</title>

<script src="https://unpkg.com/vue"></script>

</head>
<body>
<div id="app-7">

<ol>
<!--创建一个 todo-item组件的实例
为每个todo-item提供todo对象，todo对象是变量，即其内容可以是动态的
我们也需要为每个组件提供一个key值
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>

</div>

<script>
//注册全局组件
Vue.component('todo-item',{

//todo-item组件现在接受一个
//"prop"类似于一个自定义attribute
//这个prop名为todo
props:['todo'],
template:'<li>{{todo.text}}</li>'

})

var app7 = new Vue({
  el: '#app-7',
  data: {
groceryList:[
{id:0,text:'蔬菜'},
{id:1,text:' 奶酪'},
{id:2,text:'随便其他什么人吃的东西'}
]


  }

})


</script>

</body>
</html>

tips:

template

英[ˈtempleɪt]

美[ˈtemplət]

n.	样板; 模板; 型板; 模框; 标准;

groceryList:食品清单购物单

vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

tips：什么是MVVM

MVVM是Model-View-ViewModel的简写。它本质上就是MVC （Model-View- Controller）的改进版。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。