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只适用在表单控件中 比如：表单文本、多行文本、复选框、单选按钮、多选按钮、选择框。

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 -v和npm -v,如果能显示出版本号，就说明安装成功。
　　　　　　　　　　　　　　1，安装  npm install vue-cli -g 全局安装
　　　　　　　　　　　　　　　　如果接下来你不知道要干嘛，那么你可以在命令行中输入    vue -help
　　　　　　　　　　　　　　2，vue init webpack mysite
　　　　　　　　　　　　　　安装指南 https://www.cnblogs.com/alice-bj/p/9317504.html