Vue基础

2018-07-27 06:29:02来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

一、Vue介绍

vue的作者叫尤雨溪,中国人。

在前端框架技术中有三大框架:

Angularjs:谷歌公司生产

React:Facebook公司

Vue:尤雨溪作者

vue官网说:Vue.js(读音 /vju?/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。 

Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

关于渐进式和自底向上增量开发我们来看一下知乎的回答:

二 、官网

https://cn.vuejs.org/ 

三、Vue基础语法

1.声明式渲染

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

实例:
<div id="app">
{{ message }}
</div>
var app = new Vue({  #生成Vue实例
el: '#app',      #绑定DOM元素
data: {        #数据属性
message: 'Hello Vue!'
}
})

2. 模板语法
  1. {{name}}     --> 在标签中间引用data属性中的变量
  2. v-html='msg' --> 在页面上显示我定义的标签元素
       示例:
      <div id="app">
        <p v-html="message"></p>
      {{ message1.split('').reverse().join('') }}
     </div>
    <script>
         var app = new Vue({
          el: "#app",
          data: {
              message: '<a href="https://www.luffycity.com">点我</a>',
              message1: "水银"
              }
          })
    </script>

  3. v-if='ok'    --> 控制标签在不在DOM中
  4. v-show='!ok' --> 控制标签的display属性的值(是否显示)
  一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;
  如果在运行时条件很少改变,则使用 v-if 较好。 
   

  5. v-bind:href='url'  --> 将标签的属性和vue实例的data属性绑定起来【  简写为 :】
  6. v-on:click='dianwo'--> 给标签绑定一个点击事件,方法需要在vue实例的methods中定义【简写为 :@】
   7. v-model='article'  --> 用在input标签和textarea标签中,将用户输入和vue实例中的数据属性建立双向绑定
  示例:
    <div id="app">
        <p v-if="ok">想要带你去浪漫的西二旗,然后一起去上地做面试题</p>

        <p v-show="ok">想要带你去浪漫的西二旗,然后一起去上地做面试题</p>

        <a v-bind:href="url">点我啊</a> #在这里 href 是参数,告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

        <button v-on:click="ooxx">ooxx</button>  #在这里参数是监听的事件名。

        <form action="" v-on:submit.prevent="onSubmit"> #阻止提交时刷新
            <input type="text" name="name">
            <input type="submit" value="提交">
        </form>
    </div>

  <script>
    var app = new Vue({
        el: "#app",
        data: {
            ok: true,
            url: 'https://www.luffycity.com'
        },
        methods:{
            ooxx:function () {
                alert('ooxx');
            },
            onSubmit:function () {
                alert('不许刷新页面')
              }
          }
      })
  </script>

3. 计算属性和侦听器
1. 计算属性
    1. 计算属性需要定义在vue实例的 computed 中
    2. 多用于对变量做一些自定义的操作
    3. 我们在页面上像使用普通data属性一样使用计算属性
示例:<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: '12345',

 #方法  methods: {
            reverseMessage: function () {
                return this.message.split('').reverse().join('')
            }
        },
        computed:{
            // 计算属性
            reverseMessage:function () {
                return this.message.split('').reverse().join('')
            },
      })
     watch: {
            //侦听器
            }
  </script>

2. 侦听器
    多用于一些复杂的运算或者异步操作
    侦听器需要放在 vue实例的 watch 中
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

4. class和style属性
            1. 基于对象的绑定
            2. 基于数组的绑定

<div id="app">
    <div class="c" v-bind:class="{c1: ok}" v-on:click="bianhong"></div>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            ok: true
        },
        methods: {
            bianhong:function () {
                this.ok = !this.ok  #两种样式无缝切换
            }
        }
    })
</script>

5. 条件渲染
   v-if
      如果想控制多个标签的显示与否,可以使用 template 标签把它们包起来
   v-if/v-else
   v-if/v-else if /v-else
示例:
<template v-if="ok">
   <p>想要带你去浪漫的西二旗,然后一起去上地做面试题。</p>
   <p >世情薄</p>
   <p>人情恶</p>
</template>

6. 列表渲染
   v-for循环
v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。
<ul id="example-2">
<li v-for="(item, index) in items">
#可以有两个参数
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
7. 事件处理
   详见2.模板语法

8. 表单绑定
   v-mode指令是v-bind:vlaue 和v-on:input的结合体。

   v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本   质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

  v-model只适用在表单控件中 比如:表单文本、多行文本、复选框、单选按钮、多选按钮、选择框。

 

四、组件

组件是可复用的 Vue 实例,且带有一个名字,我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用

因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 datacomputedwatchmethods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

注意:data 必须是一个函数

1. 注册全局组件
            Vue.component(组件名,{
                template: ``,
                data: function(){
                    return {}
                },
                methods: {...}
            })
        2. 注册局部组件(当前vue实例才能使用的组件)
            new Vue({
                el: '#app',
                components: {
                    alert: {
                        template: ``,
                        data: function(){
                            return {}
                        },
                        methods: {...}
                    }
                }
            })
        3. 组件间通信
            1. 父组件 -传值-> 子组件
                1. 父组件通过 v-bind:变量='值'
                2. 子组件需要通过props 声明我需要的变量
                注意事项:
                 使用props声明 我这个组件需要外边给我传一个字符串格式的name变量
                // props: ['name'],
            2. 子组件  -传值-> 父组件

     在vue的组件中通过触发自定义的事件来向外传递信息
                触发自定义事件的方式,为了确保父组件的值不会被子组件直接修改
                子组件触发事件:
                    this.$emit('事件名')
                父组件监听事件:
                    v-on:事件名='处理的方法'

    3. 组件间传值

         1.Vue实例的生命周期钩子函数(共8个)   

        2. 基于bus对象实现

        创建一个空的Vue实例作为时间总线:

        var bus = new Vue()

        bus.$emit('taopao')  # 出发A组件的事件

        mounted:function(){    #在组件B创建的钩子中监听事件
                            var _this = this;
                            bus.$on('taopao', function(){     # el被挂载之后就监听bus
                              _this.num += 1;          # 在这个作用域中 this 指的是 bus
                         })
                   }

   4. 插槽和带名字的插槽
                   引用子组件的时候,我可以传递一些额外的标签元素

        插槽是占位置的!!!
                  插槽多了可以起名字,进行区分!   --> <span slot='heihei'>嘿嘿!</span>
                 <alert>根本不显示</alert>

     5. 组件的注意事项:
                1. 特殊的组件需要使用is语法声明一下 比如 table、select、ul等内部使用的组件
                2. 捕获子组件的原生事件

2. 前端开发工具包
		1. node.js
			本质上还是JS,跑在V8引擎上的,让JS能够和操作系统进行交互
			和Python\php类似的脚本语言
			
		2. npm
			类似于Python中的pip
			
			帮助我们解决包和包之间版本的依赖关系

		3. webpack
			将后端开发的js代码打包成一个单独的js文件
			
			1. 安装
				npm install webpack -g
				npm install webpack-cli -g
			2. 打包JS
				webpack b.js
				
				
		4. vue-cli  ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。
              首先需要安装Node环境。安装完成之后,可以在命令行工具中输入node -vnpm -v,如果能显示出版本号,就说明安装成功。
              1,安装 npm install vue-cli -g 全局安装
                如果接下来你不知道要干嘛,那么你可以在命令行中输入 vue -help
              2,vue init webpack mysite
              安装指南 https://www.cnblogs.com/alice-bj/p/9317504.html

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Python爬虫实战 :批量采集股票数据,并保存到Excel中

下一篇:python全栈开发-面向对象-进阶