web基础之Vue

官网https://cn.vuejs.org/v2/guide/index.html

Avue:https://avuejs.com/doc/installation

是一套用于构建用户界面的渐进式框架

  • 使用 Virtual DOM
  • 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。

CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
.MVVM 模式的实现者——双向数据绑定模式
Model：模型层，在这里表示 JavaScript 对象
View：视图层，在这里表示 DOM（HTML 操作的元素）
ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者

虚拟dom和diff算法（vue速度快的原因）

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

var vm = new Vue({})
插值表达式
插值表达式的作用是在View中获得Model中的内容
1.插值表达式
<div id="app">{{title}} {{[1,2,3,4][2]}}
 {{ {"name":"xiaoyu","age":20}.age }} 
{{ sayHello()}}
new Vue({
el:"#app",
data:{
title:"hello world!"
},
methods:{
sayHello:function(){
return "hello vue";
}
}
});
2.MVVM双向数据绑定：v-model
 
<div id="app">
 <input type="text" v-model="title" />
 </div>
3.事件绑定: v-on
<input type="text" v-on:input="changeTitle" />
v-on叫绑定事件，事件是input，响应行为是changeTitle。也就是说，当input元素发生输入事件时，就会调用vue
里定义的changeTitle方法
 
event.target.value == 当前事件的对象（input元素）的value值 注意：此时的this指的是当前vue对象。
所以：如果在method里要想使用当前vue对象中的data里的内容，必须加上this.
changeTitle:function(event)
{ this.title = event.target.value; }
4.事件绑定简化版：使用@替换v-on:
 
<input type="text" @input="changeTitle" />
5.属性绑定： v-bind
html里的所有属性，都不能使用插值表达式
<a href="{{link}}">baidu</a>
new Vue({ 
el:"#app", 
data:{title:"hello world!",
     link:"http://www.baidu.com" 
},
上面的这种做法是错误的，可以使用绑定属性绑定来解决：
要想在html的元素中的属性使用vue对象中的内容，那么得用v-bind进行属性绑定
<a v-bind:href="link">baidu</a> 
可以缩写成 冒号 
<a :href="link">baidu</a>
6.v-once指令
指明此元素的数据只出现一次，数据内容的修改不影响此元素
<p v-once>{{titile}}</p>
7.v-html
就好比是innerHTML
<p v-html="finishedlink"></p>
new Vue({
el:"#app", 
data:{title:"hello world!", 
link:"http://www.baidu.com", 
finishedlink:"<a href='http://www.baidu.com'>百度</a>"
 },
8.v-text
纯文本输出内容
<p v-text="finishedlink"></p>

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

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

不再和 HTML 直接交互了，一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制

除了文本插值，还可以像这样来绑定元素 attribute：



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




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




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




   v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute


 <span v-bind:title="message">


为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
<button v-on:click="reverseMessage">反转消息</button>




vue中的语句




1.分支语句




v-if




v-else-if




v-else




v-show: 实际上是让该元素的display属性为none,隐藏的效果。所以性能更好






<div id="app"><p v-if="show">hahah</p> 
<p v-else>hohoho</p> 
<p v-show="show">hehehe</p>
 <input type="button" @click="show=!show" value="dianwo"/>
 </div> 
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> 

<script> 
new Vue({ 
el:"#app", data:{show:false 
} }); 
</script>




循环语句


vue中只有for循环






<body> 
<div id="app"> <ul>
<li v-for="str in args"> {{str}} </li> 
</ul> 
</div> 
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> <script> new Vue({
 el:"#app", 
data:{args:["a","b","c","d"] 
} }); 
</script>
 </body




改进版：for语句里，key建议加上，作为标识.i是下标










<ul>
<li v-for="(str,i) in args" :key="i"> {{str}}{{i}} </li> 
</ul>






    

  • 组件（可以反复使用，方便快捷）
    在 Vue 中注册组件component
    • 







/ 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})
现在你可以用它构建另一个组件模板：


<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>'
})




完整如下




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: '随便其它什么人吃的东西' }
    ]
  }
})






<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item     //之前定义的组件 所以直接用，并且是需要一个参数的'todo',所以我们需要绑定一个，即bind
即我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中：
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>




尽管这只是一个刻意设计的例子，但是我们已经设法将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。


我们现在可以进一步改进 <todo-item> 组件，提供更为复杂的模板和逻辑，而不会影响到父单元。


 


一个页面中只有一个div，其他的都是vue组件


vue组件里的data必须使用function的形式对{}对象进行封装，防止对其他数据的修改。 注意，template里必须有


一个根节点。


 




<meta charset="UTF-8">
 <title>component</title> </head>
 <body>
<div id="app1"> 
<my-cap></my-cap> 
</div>
 <div id="app2"> 
</div>
 </body> 
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
 <script> 

new Vue({ 
el:"#app2", 
template:"<div>aaa</div>"
 }); 



new Vue({ 
el:"#app1"
 }) 




Vue.component("my-cap",{ 
data()
{ 
return { 
status:"hellllllllo" 
} 
},
template:'<p>{{status}}<button @click="changebtn">btn</button></p>',
methods:{ 
changebtn:function(){
 this.status = "enennnnnnn" } 
}
 }); 


</script>




改进版：提高了代码的重用性——万物皆组件（本地注册cpmponents）






var cmp = { 
    data(){ 
        return { 
                status:"hellllllllo" } },
    template:'<p>{{status}}<button @click="changebtn">btn</button></p>',             
    methods:{ changebtn:function(){ this.status = "enennnnnnn" } } 
}

new Vue({ 
el:"#app1", 
components:{ "my-cap":cmp } })

new Vue({ 
el:"#app2", 
components:{ "cap":cmp } })                            







数据与方法


它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。




// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})








// 获得这个实例上的 property 类似于属性，然后直接调用
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2




除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：




var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})




实例生命周期钩子


 created， mounted、updated 和 destroye


 


计算属性computed（是一个属性，缓存里面，不变值）


基础例子


<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>


var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})


结果：




Original message: "Hello"


Computed reversed message: "olleH"


==============================



第一个VUE-cli


(整个过程最后以管理员身份运行。）


下载nodeJs安装，再安装nodeJs淘宝镜像加速器


Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境


Node 是一个让 JavaScript 运行在服务端的开发平台


而npm就是一个nodejs命令  -g全局安装



详细步骤


下载安装node.js https://nodejs.org/en/download/


在node.js的cmd组件（command prompt）中安装vue-cli 




创建vue项目文件夹并打开






mkdir d:/vuedemo cd d:/vuedemo




使用vue list命令查看当前可用的vue骨架


使用vue命令创建基于vue-webpack-simple骨架的项目,vue-cli-demo是项目名，过程中需要输入一些参数，


回车是使用提示的值






vue init webpack-simple vue-cli-demo




创建基于webpack骨架的项目






vue init webpack vue-cli-demo




过程截图


淘宝镜像，以后网卡就可以用cnpm代替npm













 并且nmp路径如上


安装vue-cli





 



这一步完成后就会发现C:Program Files
odejs
ode_modules多了一个vue-cli文件夹并且里面有一个node_moudles


这时候查看一下，就有这些方式存在了，





 而我们通常选择webpack打包方式







什么是Webpack


WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，


找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），


并将其转换和打包为合适的格式供浏览器使用。



入门https://www.runoob.com/w3cnote/webpack-tutorial.html



为什么这里的vue需要webpack,这是因为vue是支持es6的而很多浏览器还是es5所以需要降级等操作，需要webpa ck


 


 看看实际操作截图





 然后按照提示进入项目，而这里的npm install提示类似于后端的下载依赖，所以前端下次又引入了包或者依赖又需要nom install一次






 也可以用cnpm install


下载完成后看目录多出一个node_moudles，这个就是存放本地依赖的地方







 然后写vue项目比较容易出现的知识点


1组件


局部组件


<script> 


//内部注册 


import Footer from "Footer.vue" 


import Header from "Header.vue" 


import Content from "Content.vue" 


export default { 


components:{ 


"app-footer":Footer, 


"app-header":Header, 


"app-content":Content 


} 


}


</script>


 


全局组件




import Home from './Home.vue'; 


Vue.component("appHome",Home); 





2传参


下面看看父传子





 下面看看子传父、（可以理解为子传参数 Pops是为了确定类型，像Java里的声明一个方式，或者属性然后在父中实现即java中的实现类）











<script> 


//内部注册 


import Footer from "Footer.vue" 


import Header from "Header.vue" 


import Content from "Content.vue" 


export default { 


components:{ 


"app-footer":Footer, 


"app-header":Header, 


"app-content":Content 


} 


}


</script>



        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/yangj-Blog/p/13044780.html