vuejs 基本操作

一、安装

1.在本地创建一个HTML文件，然后直接引用vue.js文件
<script src="https://unpkg.com/vue/dist/vue.js"></script>
2.在node环境下可以直接用
npm install vue-cli 但是这种方式并不推荐使用，尤其是多nodejs构建工具不够了解的同学

二、渲染

1.声明式渲染
Vue.js简单地说就是创建一个简洁的模板来声明式的将数据渲染进DOM的系统：

//HTML
<div id="example">
{{message}}
</div>

//JS
var example = new Vue({
    el:'#app',
    data:{
        message:'Hello Vue!'
    }
})

最终在浏览器会显示

Hello Vue!

除了绑定插入的文本内容，我们还可以采用这样的方式绑定 DOM 元素属性：

//HTML
<div id="example">
 <span v-bind:title="message">
    Hello world!
 </span>
</div>

//JS
var example = new Vue({
    el:'#example',
    data:{
        message:"Jessionlin study Vuejs not very long"
    }
})

Hello world!

表面上并没有什么特殊的地方，但是我们发现了一个‘v-属性’结构，它的作用是在渲染过程的DOM上应用特殊的响应式行为，即将这个元素节点的title属性和Vue实例的message属性绑定到一起，当鼠标到达’Hello World!’标签所在位置时，data.message中的内容就会显示出来，此时如果在console中键入example.message = “hello world!”,重复上述操作室会发现这次显示出来的是hello world!
对于这种情况

//HTML
<img v-bind:src="imgSrc" v-bind:alt="imgAlt" v-bind:title="imgTitle">

大家肯定会觉得写这么多v-bind会很麻烦，而且看着也比较混乱，不过我们有一种更简单的方式：

<img :src="imgSrc" :alt="imgAlt" :title="imgTitle">

这样效果是相同的，是不是简单多了？

三、条件与循环

1.vuejs的条件判断也很简单：

//HTML
<div id="example">
    <p v-if="seen">Hello World!</p>
    <p v-if="seen-not">Hello Man!</p>
</div>

//JS
var example=new Vue({
    el:"example",
    data:{
        seen:true,
        seen-not:false
    }
})

最终显示结果为
Hello World!
2.循环

//HTML
<div id="example">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>

//JS
var example = new Vue({
    el:'example',
    data:{
        todos:[
            {text:'Hello World'},
            {text:'Hello Man'},
            {text:'Learn Vuejs'}
        ]
    }
})

最终的输出是：

1.Hello World
2.Hello Man
3.Learn Vuejs

如果此时在console控制台中输入example.todos.push({text:’Jessionlin is learning Vuejs’})

则最终的输出为：

1.Hello World
2.Hello Man
3.Learn Vuejs
4.Jessionlin is learning Vuejs

四、处理用户输入

1.v-on指令可以绑定一个简体那时间用于调用我们Vue实例中定义的方法

//HTML
<div id="example">
    <p>{{message}}</p>
    <button v-on:click="reverses">reverse</button>
</div>

//JS
var example = new Vue({
    el:"example",
    data:{
        message:'Hello Vue.js'
    }，
    methods:{
        reverses:function(){
            this.message = this.message.split('').reverse().join('')
        }
    }
})

最终结果是

2.v-model 使得在表单输入和应用状态中做双向数据绑定变得非常轻巧

//HTML
<div id="example">
    <p>{{message}}</p>
    <input v-model="message">
</div>

//JS
var example = new Vue({
    el:"example",
    data:{
        message:"Hello Vue!"
    }
})

最终结果：

五、用组件构建（应用）

在Vue中，一个组件实质上是一个拥有预定义选项的一个Vue实例：

//JS
vue.component('todo-item',{
    template:'<li>This is a todo</li>'
})

然后我们就可以在另一个组件模板中写入它

//HTML
<ol>
  <todo-item></todo-item>
</ol>

但是此时所有的子组件全都具有相同的文本，操作起来不是太好，我们应该将数据从父作用域传到子组件。那么我们添加一个prop字段，表示属性：

//JS
vue.component('todo-item',{
    props:['todo'],
    template:'<li>This is a todo</li>'
})

现在，我们可以使用v-bind指令将todo传到每一个重复的组件中：

//HTML
<div id="example">
  <ol>
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

//JS
Vue.component('todo-item',{
    props:['todo'],
    template:'<li>{{todo.text}}</li>'
})

var example = new Vue({
    el:'#example',
    data:{
        groceryList:[
            { text: 'Vegetables' },
            { text: 'Cheese' },
            { text: 'Whatever else humans are supposed to eat' }
        ]
    }
})

1.Vegetables
2.Cheese
3.Whatever else humans are supposed to eat