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的系统：

1
2
3
4
//HTML
<div id="example">
{{message}}
</div>

1
2
3
4
5
6
7
//JS
var example = new Vue({
	el:'#app',
    data:{
    	message:'Hello Vue!'
    }
})

最终在浏览器会显示

1
Hello Vue!

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

1
2
3
4
5
6
//HTML
<div id="example">
 <span v-bind:title="message">
 	Hello world!
 </span>
</div>

1
2
3
4
5
6
7
//JS
var example = new Vue({
	el:'#example',
    data:{
    	message:"Jessionlin study Vuejs not very long"
    }
})
1
Hello world!

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

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

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

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

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

三、条件与循环

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

1
2
3
4
5
//HTML
<div id="example">
	<p v-if="seen">Hello World!</p>
    <p v-if="seen-not">Hello Man!</p>
</div>

1
2
3
4
5
6
7
8
//JS
var example=new Vue({
	el:"example",
    data:{
    	seen:true,
        seen-not:false
    }
})

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

1
2
3
4
5
6
7
8
//HTML
<div id="example">
	<ol>
    	<li v-for="todo in todos">
        	{{todo.text}}
        </li>
    </ol>
</div>

1
2
3
4
5
6
7
8
9
10
11
//JS
var example = new Vue({
	el:'example',
    data:{
    	todos:[
        	{text:'Hello World'},
            {text:'Hello Man'},
            {text:'Learn Vuejs'}
        ]
    }
})

最终的输出是：

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

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

则最终的输出为：

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

四、处理用户输入

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

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

1
2
3
4
5
6
7
8
9
10
11
12
//JS
var example = new Vue({
	el:"example",
    data:{
    	message:'Hello Vue.js'
    }，
    methods:{
    	reverses:function(){
        	this.message = this.message.split('').reverse().join('')
        }
    }
})

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

1
2
3
4
5
//HTML
<div id="example">
	<p>{{message}}</p>
    <input v-model="message">
</div>

1
2
3
4
5
6
7
//JS
var example = new Vue({
	el:"example",
    data:{
    	message:"Hello Vue!"
    }
})

最终结果：
alt text

五、用组件构建（应用）

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

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

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

1
2
3
4
//HTML
<ol>
  <todo-item></todo-item>
</ol>

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

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

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

1
2
3
4
5
6
//HTML
<div id="example">
  <ol>
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//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
2
3
1.Vegetables
2.Cheese
3.Whatever else humans are supposed to eat