VUE 杂记

组件

• 使用组件必须先实例化对象

    new Vue({        el: "#app-01",        data:{            message: "Hello World Vue.js!"  //不能带分号!!!        }    })

模板指令

• 模板指令html和vue对象粘合数据渲染

v-text == {{mes}} //文本插值

v-once //单次插值

v-html=”mes” //输出真正的 html （保存了html结构）

v-model 表单控件元素上创建双向数据绑定。它负责监听用户的输入事件以更新数据。

v-bind 动态地绑定一个或多个特性，或一个组件 prop 到表达式

v-if 不渲染 Dom 元素

v-show 通过CSS:display：none;来隐藏的

v-for 循环渲染

VUE里面的引入方法：

• 二者等价: import App from ‘./App’ == var App = require(‘./App’)

import Hello from ‘@/components/Hello’;
import Hello from ‘./components/Hello’;
上面语句中的@和.的区别是什么？
./这是相对路径的意思。
@/这是webpack设置的路径别名。

这东西在vue标准模板里面的build/webpack.base.conf这个文件里面。

resolve: {// 路径别名alias: {        '@': resolve('src'),        'vue$': 'vue/dist/vue.esm.js'    }},

就是说@这东西代表着到src这个文件夹的路径

router-view 设置默认的渲染页面    {    path: '/', //根目录    component: home, //默认的进入页面    redirect:{path:'/hello'}, //重定向 定义默认路由要跳转的地址    }

定义事件的俩种方式相等

<div v-on:click="onclick(index)"></div>methods:{    onclick(index){        console.log("aa");    }    onclick:function(index){        console.log("ss");    }}

vuex的理解

简单解释下：
Vuex 规定，属于应用层级的状态只能通过 Mutation 中的方法来修改，而派发 Mutation 中的事件只能通过 action 的commit。

从左到又，从组件出发，组件中调用 action，在 action 这一层级我们可以和后台数据交互，比如获取初始化的数据源，或者中间数据的过滤等。然后在 action 中去派发 Mutation。Mutation 去触发状态的改变，状态的改变，将触发视图的更新。

跨域的几种方法

1. jsonp , 此方法后台也要用jsonp
2. 反向代理
3. 后台做处理，CORS

…mapActions俩种引入方法 ([])、({})

// mapActions 直接使用state里的值，不做改变的情况
…mapActions([“decrement”]),

// mapActions 需要对state里的值做对应的改变
…mapActions({
add: “decrement”
})