vue.js入门语法

1.入门

<div id="vue_det">
    <h1>site : {{site}}</h1>   //两个大括号显示参数
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',       //绑定的元素的id或class
        data: {               //初始化数据
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {           //方法体
            details: function() {
                             //方法用data的数据用this
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>

2.模板语法

1.v-html：输出HTML代码（v-html="<h1>菜鸟教程</h1>"）
2.v-bind：输出HTML属性（v-bind:style="style='color: red;'"）或（v-bind:class；id；href）
3.v-on：点击事件（v-on:click="方法名"）等（submit.prevent）
4.v-model：绑定数据（v-model="data的数据"）=>修饰符(v-model.lazy    .number   .trim)
5.v-if：条件语句(v-if: v-else-if: v-else:)（v-if="data的数据"）
6.v-show：是否显示html

3.循环语句

<div id="app">
  <ul>
    //值 键 索引
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})

4.计算属性

computed：obj设置{get;set;}或者函数

5.监听属性

watch： https://www.runoob.com/vue2/vue-watch.html

6.组件,封装一段html和js代码，然后以tagName标签形式调用

Vue.component(tagName, options)    https://www.runoob.com/vue2/vue-component.html

7.自定义指令 directives

<div id="app">
  <p>页面载入时，input 元素自动获取焦点：</p>
  <input v-focus>
</div>

<script>
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>

8.路由

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
    <router-link to="/aaa">Go to aaa</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

<script>
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const aaa = { template: '<div>aaa</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routepath = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '/aaa', component: aaa }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes:routepath// （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！
</script>

10.Ajax(axios)   https://www.runoob.com/vue2/vuejs-ajax-axios.html

<script type = "text/javascript">
new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://www.runoob.com/try/ajax/json_demo.json')
      //.post('https://www.runoob.com/try/ajax/demo_axios_post.php')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})
</script>

//get请求设置参数直接 url？id=123
// 也可以通过 params 设置参数： axios.get('/user', { params: { ID: 12345 } }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });

//post请求参数设置
//axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });

多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}
 
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));