Vue - vue0：语法（狂神） - 《其他：前端、安卓等》

1.引入vue
2.vue写法原则：
3.绑定数据：
if条件
事件绑定
双向绑定 v-model
组件：

soc（关注分离度原则）
vue中，前端标签的属性是不能直接使用vue的vm的属性值的，必须通过v-bind来实现，但是一旦v-bind之后，v-bind:title= =后面的值必须是vue的了。
但是前端的非属性可以使用vue的值比如

。div中间的可以直接使用

1.引入vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>

或者只用这个就可以了

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.vue写法原则：

找到特定的dom节点，通过el选中，然后给他提供数据 data，提供方法methods

3.绑定数据：

    <div id="app">
        {{message}}
    </div>
    <script>
        let vm = new Vue({
        el: "#app",
        data: {
              message: "hello world",
        },
        });
    </script>

带有v-（比如v-bind）表示是vue的指令

<div id="app">
            <span v-bind:title="test">鼠标悬停几秒钟查看信息</span>
</div>
<script>
        let vm4 = new Vue({
        el: "#app",
        data: {
              test: "我是悬停内容 ",
        },
        });
</script>

表示将span的title属性和数据test绑定。
循环和条件

<div id="app">
        <li v-for="it in items">
            {{it.name}} -- {{it.age}}
        </li>
</div>
<script>
   var vm = new Vue({
      el: '#app',
      data: {
          message: '测试循环',
          items: [
              { name: "zs", age: 20 },
              { name: "xm", age: 25 },
          ]
      }
  })
</script>

注意，数组是 items : [ ]对象是{ name：‘xm’，age:20}
相当于是提供的数据里有个items数据，这个数组里存放了很多对象。这些对象有name和age属性，所以取出name和age

if条件

<div id="app">
    <h1 v-if="type=='a'">A</h1>
    <h1 v-else-if="type=='b'">B</h1>
    <h1 v-else>ELSE</h1>
    <h1 v-if="a=='b'">AB</h1>
</div>
<script>
    var vm = new Vue({
      el: '#app',
      data: {
          type: 'b',
          a: 'b'
      }
    })
</script>

事件绑定

通过v-on方法 v-on:click v-on: mouseenter v-on:hover

<button v-on:click="sayHello" id=’app’>click me</button>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: '你真帅！'
        },
        methods: {
            sayHello: function () {
                  alert(this.message)
            }
        }
    })
</script>

双向绑定 v-model

<div id="app"><input type="text" v-model="message">{{message}}</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
              message: '你真帅！'
        }
    })
</script>

前面都是数据变化，视图跟着变，加了v-model之后，视图层的数据变化时候，数据层也跟着变化

    <div id="app">
        性别：
      <input type="radio" name="sex" value="男" v-model="sex">男
      <input type="radio" name="sex" value="女" checked v-model="sex">女
      <p>
        你选中了：{{sex}}
      </p>
    </div>
    <script>
      var vm = new Vue({
          el: '#app',
          data: {
                sex: "男"
          }
      })
    </script>

有了v-model之后，checked就没有用了。
比如上面应该是女被选中了（有checked），但是其实是男被选中了，因为v-model绑定了sex，而sex的初始值是男。

组件：

不涉及数据传递的：

<div id="app">
    <compon></compon>
</div>
    <script>
      Vue.component("compon", {
            template: "<h1>测试</h1>"
      })
      var vm = new Vue({
            el: '#app',
      })
    </script>

涉及数据传输的：

<div id="app">
    <compon v-for="item in items" v-bind:j="item" v-bind:i="item"></compon>
</div>
    <script>
      Vue.component("compon", {
          props: ['i', 'j'],//数组，字符串
          template: "<h1>{{j}}<li>{{i}}</li></h1>"
      })
      var vm = new Vue({
          el: '#app',
          data: {
                items: ['java', 'linux', '前端']
          }
      })
    </script>

三个部分：前端、组件、vue实例

前端：能调用组件，绑定组件props里的值，能获取data提供的数据
组件：只能获取本地props属性里的值，注意，props是数组，而且里面是字符串类型
vue实例：提供数据和方法，不能访问组件

vm有个data属性，还有个data（）方法

axios网络通信

    <style>
      [v-clock] {
          //v-clock：解决闪烁问题
          display: none;
      }
    </style>
<div id="app" v-cloak>
    <div>{{info.name}}</div>
    <div>{{info.paramz.feeds[0].id}}</div>
    <a v-bind:href="info.url">click me</a>
</div>
    <script>
      Vue.component("compon", {
        template: "<h1>测试</h1>"
      })
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    info: {
                        name: null,
                        paramz: null
                    }
                }
            },
            mounted() {//钩子函数，链式编程
                  axios.get('data.json').then(response => this.info = response.data)
            }
        })
    </script>

计算属性：注意一个带括号，一个不带

<div id="app" v-cloak>
    <div> {{currentTime1()}}</div>
    <div> {{currentTime2}}</div>
</div>
    <script>
      var vm = new Vue({
          el: '#app',
          data: {
                message: "刷新"
          },
          methods: {
              currentTime1: function () {
                return Date.now();
              }
          },
          computed: {
              currentTime2: function () {
                  this.message;
                  return Date.now();
              }
          }
      })
    </script>

注意methods属性和computed属性里面都必须是函数。
而且computed存储的值是通过缓存来存储的。除非里面的值有变化，否则数据不会刷新。
比如如果message不变，那么调用

{{currentTime2}}

就总不变。但是如果message变了，上面计算结果也会跟着刷新。

<div id="app">
    <soltdemo>
        <!--第一个插槽，放置title组件,这里把title看成一个正常的类似div的标签,所以他有该有的一切属性-->
        <mtitle slot="slot1" v-bind:args1="message"></mtitle>
        <mcontent slot="slot2" v-for="item in items" v-bind:args2="item"></mcontent>
    </soltdemo>
</div>
    <script>
        Vue.component("soltdemo", {
        template: "<div>\
                          <slot name='slot1'></slot>\
                          <ul>\
                                <slot name='slot2'></slot>\
                          </ul>\
                     </div>"
        })
        Vue.component("mtitle", {
        props: ["args1"],
        template: "<div>{{args1}}</div>"
        })
        Vue.component("mcontent", {
        props: ["args2"],
        template: "<li>{{args2}}</li>"
        })
        var vm = new Vue({
        el: '#app',
        data: {
            message: "课程目录",
            items: ["linux", "java", "js"]
        }
        })
    </script>

vue0：语法（狂神） - 图1

自定义事件内容分发

<div id="app">
    <soltdemo>
        <mcontent slot="slot2" v-for="(item,index) in items" :args="item" v-on:fontremove="vmremove(index)"></mcontent>
    </soltdemo>
</div>
    <script>
      Vue.component("soltdemo", {
          template: "<div>\
                            <ul>\
                                  <slot name='slot2'></slot>\
                            </ul>\
                       </div>"
      })
      Vue.component("mcontent", {
          props: ["args"],
          template: "<li>{{args}} <button @click='compremove'>删除</button></li>",
          methods: {
              compremove: function () {
                    this.$emit("fontremove")
              }
          }
      })
      var vm = new Vue({
          el: '#app',
          data: {
                items: ["linux", "java", "js"]
          },
          methods: {
              vmremove: function (index) {
                    this.items.splice(index, 1) //从index开始，一次删除一个
              }
          }
      })
    </script>

解释：
1.组件和前端建立联系
当删除键点下的时候，调用组件的compremove方法，rempremove调用前端自定义的方法fontremove（不用传参数）
2.前端和vm建立联系
fontremove方法和
vmremove方法绑定，并且给vmremove传入参数index
webpack：把es6的代码打包成es5可以兼容的

# 进入工程目录
cd hello-vue
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev

根据之前创建vue-cli项目一样再来一遍创建项目
1．创建一个名为 hello-vue 的工程 vue init webpack hello-vue
2．安装依赖，我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件
启动测试一下： npm run dev
3．创建成功后用idea打开，并删除净东西创建views和router文件夹用来存放视图和路由
4．在views创建Main.vue
5．在views中创建Login.vue视图组件
6. 创建路由,在 router 目录下创建一个名为 index.js 的 vue-router 路由配置文件index.js
7．在main.js中配置相关main.js main.js是index.html调用的所以基本上所有东西都导出到这一定不要忘记扫描路由配置并将其用到new Vue中
8．在App.vue中配置显示视图